2

我使用 HTML 和 Javascript 创建了一个倒数计时器（几乎）。我使用 Javascript 创建文本输入和按钮（启动计时器）。

但是，当我运行该页面时，输出只是两个文本文本输入框，我终生无法弄清楚。我已经在不同的浏览器中尝试了该页面，结果相同。作为测试，我还尝试将按钮设置为第一个元素，并且它仍然显示为文本输入。

我使用了一个调试器，当它显示 HTML（由 javascript 创建）时，它显示了两个没有任何结束标记的项目。我不确定调试器是否如此显示创建的元素，或者当我使用 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

2

.setAttribute 是一个具有语法的函数 element.setAttribute(name, value)

所以你的代码应该是

//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");

工作演示

于 2013-10-30T08:38:05.713 回答
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 回答