gpt4 book ai didi

Javascript 创建的按钮不会以 HTML 显示

转载 作者:太空宇宙 更新时间:2023-11-04 15:10:56 24 4
gpt4 key购买 nike

我已经(几乎)使用 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(名称, 值)

所以你的代码应该是

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

WORKING DEMO

关于Javascript 创建的按钮不会以 HTML 显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19677223/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com