Javascript创建按钮不会显示在HTML中

Javascript created button wont display in HTML

本文关键字：HTML 显示 创建 按钮 Javascript      更新时间：2023-09-26

我用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>

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

工作演示

你应该考虑在你的javascript代码中创建一个这样的按钮

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

在此处查看演示：http://jsfiddle.net/Miciurash/J5JmJ/

MarsOne的答案是正确的，你只是setAttribute语法错误。顺便说一下，您设置的所有属性也是 HTMLInputElement 的本机属性，因此您可以像这样操作：

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

。

startButton.type = "submit";
startButton.value = "Start Countdown";

我们可以使用 JavaScript 创建按钮，而不是将输入创建为元素：

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

还

 var startButton = document.createElement("input");
 startButton.type="button"
相关文章：