2

HTMLとJavascriptを使用して（ほぼ）カウントダウンタイマーを作成しました。Javascript を使用して、テキスト入力とボタン (タイマーを開始するため) を作成します。

ただし、ページを実行すると、出力は 2 つのテキスト テキスト入力ボックスにすぎず、一生理解できません。このページを別のブラウザで試してみましたが、同じ結果でした。テストとして、ボタンを最初の要素にしようとしましたが、それでもテキスト入力として表示されます。

私はデバッガーを使用し、(javascript によって作成された) HTML を表示すると、終了タグのない 2 つの項目が表示されます。それがデバッガーが作成された要素を表示する方法なのか、Javascript を使用して入力要素を作成するときに終了タグが実際に欠落しているのかはわかりません。

添付しました: 私の HTML ページ、要素の作成に関連する Javascript コード スニペット、およびデバッガーに表示される HTML 出力の関連スニペット。

私は途方に暮れているので、どんな助けにも感謝します。

HTML:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>JavaScript - CountDown</title>
    <style type="text/css">
  body {
    font-family: sans-serif;
    color: #333;
  }

  #container {
    width: 400px;
    margin: auto;
  }
</style>
 </head>

 <body>
 <div id="container">
 <div id="inputArea">
</div>

<h1 id="time">0:00 </h1>
 </div>

 <script src="script.js"> </script>
 </body>
 </html>

Javascript:

// as soon as page is loaded
window.onload = function () {
//create input text box and give it a name of 'minutes'
var inputMinutes = document.createElement("input");
inputMinutes.setAttribute = ("id", "minutes");
inputMinutes.setAttribute = ("type", "text");

//create a button
var startButton = document.createElement("input");
startButton.setAttribute = ("type", "button");
startButton.setAttribute = ("value", "Start Countdown");

startButton.onclick = function () {
    startCountdown();
};

// add to the DOM to div called inputArea
document.getElementById("inputArea").appendChild(inputMinutes);
document.getElementById("inputArea").appendChild(startButton);
};

デバッガによる HTML 出力:

<body>
<div id="container">
<div id="inputArea">
<input>
<input>
</div>
<h1 id="time">0:00 </h1>
</div>
4

4 に答える 4

1

JavaScriptコードでこのようなボタンを作成することを検討する必要があります

//create a button
var startButton = document.createElement("button");
startButton.innerHTML ="Start Countdown";

ここでデモを参照してください: http://jsfiddle.net/Miciurash/J5JmJ/

于 2013-10-30T08:44:00.923 に答える
1

MarsOne の答えは正しいですsetAttribute。構文が間違っているだけです。ちなみに、設定している属性はすべてHTMLInputElementのネイティブ プロパティでもあるため、次のように設定できます。

inputMinutes.id = "minutes";
inputMinutes.type = "text";

. . .

startButton.type = "submit";
startButton.value = "Start Countdown";
于 2013-10-30T08:44:23.870 に答える
1

入力を要素として作成する代わりに、JavaScript を使用してボタンを作成できます。

var startButton = document.createElement("button");
startButton.innerHTML ="Start Countdown";

document.getElementById("inputArea").appendChild(startButton);

そうしないと

 var startButton = document.createElement("input");
 startButton.type="button"
于 2013-10-30T09:00:21.513 に答える