时间戳

首页 > 解决方案 > 尽管代码（看起来）正确，但 Javascript 输入/复选框程序未运行

javascript - 尽管代码（看起来）正确，但 Javascript 输入/复选框程序未运行

问题描述

这段代码似乎不会运行，即使我找不到任何问题。这可能是愚蠢的，但我是初学者，所以请不要判断:)

PS 它应该抓取用户输入和选中的复选框选项，然后返回正确的中文输出（正式或非正式）。

<html>

<form>
Formal:<input id="check1" type="checkbox"></input><br>
Informal:<input id="check2" type="checkbox"></input><br>
Num. 1 Char:<input id="a" type="number" value=" "></input><br>
Num. 2 Char:<input id="b" type="number" value=" "></input><br>
Num. 3 Char:<input id="c" type="number" value=" "></input><br>
<button onclick="myFunction">Make Chinese!</button>
</form>
<h1 id="answer">Answer will show up here</h1>

<script type="text/javascript">

let aa = (document.getElementById('a').value);
let bb = (document.getElementById('b').value);
let cc = (document.getElementById('c').value);


function myFunction() {
if (document.getElementById('check1').checked) {
document.getElementById('answer').innerHTML = (aa+"元&quot;+bb+"角&quot;+cc+"分&quot;);
}else{
document.getElementById('answer').innerHTML = (aa+"块&quot;+bb+"毛&quot;+cc+"分&quot;);
}
}

</script>

</html>

标签： javascripthtml

解决方案

由于您正在处理来自元素内部的用户输入form（这是一件好事），浏览器认为该按钮（唯一存在的）用于提交数据。所以它基本上是提交数据（在这种情况下实际上是刷新）。如果你想阻止这个按钮的数据提交，你可以type="button"在按钮的 HTML 代码中添加一个属性，现在它将充当一个“普通”按钮。

另外，当使用直接嵌入到 HTML 代码中的事件监听器时，您需要调用 HTML 内部的函数。为此，您需要在函数名称的末尾添加括号。

最后，您的按钮代码应如下所示：

<button type="button" onclick="myFunction()">Make Chinese!</button>

推荐阅读