如何使用js-if语句添加html代码

我有这行代码，只是在学习和练习，想知道怎么了，在带有id="x"的span中，数字在变化，但带有if-else语句的JS脚本没有显示文本变化。我希望脚本根据id="x"中的数字运行对id="dobre+"的text变体。

function f1() {
var z, text;
document.getElementById('x').value.innerHTML = z;
if (z > 1) {
text = "Clicked enough?";
} else {
text = "Click more";
}
document.getElementById('dobre+').innerHTML += "text";
}

<body>
<button onclick="document.getElementById('x').innerHTML++" onclick="f1">+</button>
<span id="x"></span>
<span>&#8364</span>
<button onclick="document.getElementById('x').innerHTML--" onclick="f1">-</button>
<span id="dobre+"></span>
</body>

您的代码有很多问题。我以某种方式让你的代码工作，但其中有很多不正确的地方，你需要知道

button上的onclick应该只设置一次，其中的JS语句需要用;分隔
f1是一个函数，因此为了调用它并使其实际运行，您必须将其调用为f1()
在使用innerHTML或innerText获得的strings上使用parseInt是一种很好的做法
document.getElementById('x').value.innerHTML= z;在跨度+上没有.value。如果将z的值分配给innerHTML，则应执行相反的操作

您需要检查代码，检查JavaScript控制台，查找错误并尝试首先修复它。

以下是代码中的问题：

onclick属性只能使用一次。如果要执行多个操作，请使用分号"；"。最好把所有的逻辑都写在一个函数中。在你的情况下，f1((

2(document.getElementById('x').value.innerHTML= z;赋值应该是反向的，因为你想捕获它。它应该是document.getElementById('x').innerHTML;如果你想执行数学运算，也可以尝试将它解析为Number/Int。

3(document.getElementById('dobre+').innerHTML+= "text";在这一行中，不需要连接前面的文本。document.getElementById('dobre+').innerHTML= text;此外，文本是您已初始化的变量，而不是字符串。

如果你修复了以上所有问题，你的代码应该如下所示，它会按预期工作。

<!Doctype html>
<head>
<meta charset="UTF-8">
<title> Experimental page</title>  
</head>
<body>
<button onclick="document.getElementById('x').innerHTML++;f1()"> 
+</button>
<span id="x"></span><span>&#8364</span>
<button onclick="document.getElementById('x').innerHTML--;f1()">     -</button>
<span id="dobre+"></span>
<script>
function f1(){
var z, text;
z= document.getElementById('x').innerHTML;
if (z > 1){
text = "Clicked enough?";
} else { text = "Click more";
}
document.getElementById('dobre+').innerHTML= text;
}
</script>
</body>

相关内容

最新更新

热门标签：