gpt4 book ai didi

javascript - 使用按钮 OnClick 执行 document.write() 时未定义 ="counter"

转载 作者:行者123 更新时间:2023-12-02 16:16:06 24 4
gpt4 key购买 nike

我是编程新手,需要一些帮助,为什么 document.write() 不起作用,并且页面基本上崩溃了......任何人都可以帮助我吗?

<!DOCTYPE html>
<html>
<head>
</head>
<script type="text/javascript">

function showText() {
var x;
var counter;
if ( x === 0) {
counter = 0;
x = 1;
}
counter = counter + 1;
document.write("Times clicked: " + counter);
}


</script>
<body>
<script type="text/javascript">
showText();
</script>

<button onclick="showText();">Click Me!<button>


</body>
</html>

最佳答案

避免使用document.write

引自MDN开发者网络documentation page :

Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.

所以基本上,您的问题是使用 document.write页面加载后:这将导致删除页面的整个内容并显示该字符串。

此外,您的代码不起作用,因为您的 count变量在 showText 内声明函数,并且您尝试在其外部访问它,从而遇到错误。

解决方案

为了使您的代码正常工作,您应该创建另一个元素,比方说 <p>元素,并显示其中的文本。以下是正确页面的示例:

<!DOCTYPE html>
<html>
<head></head>
<body>
<button id="btn">Click me!</button>
<p id="txt">Times clicked: 0</p>

<script type="text/javascript">
function showText() {
count++;
text.textContent = "Times clicked: " + count;
}

var count = 0,
button = document.getElementById("btn"),
text = document.getElementById("txt");

button.addEventListener("click", showText);
</script>
</body>
</html>

查看 live demo here

关于javascript - 使用按钮 OnClick 执行 document.write() 时未定义 ="counter",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29579089/

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