Javascript html函数输入按钮输出

Question

我正在努力完成以下任务。

得到一个javascript函数:

function dec2bin(dec){

    return (dec >>> 0).toString(2);

}

我的 html 应该是这样的:- 一个用于“dec”参数的输入字段。- 一键“计算”以启动功能 dec2bin <-- 参数必须从上述输入字段中获取。- 一个输入(输出)字段，用于在输入字段中输入数字并单击按钮后显示结果。

我不知道为什么它不起作用，但我猜问题出在一个或两个标记为“***”的行中:

***<input type="text" id="input" value="input"/>***
<input type=button id="button1" value="calculate" onclick="dec2bin('input');"/>
<p id = "output"></p>

<script type="text/javascript">
function dec2bin(dec){

    return (dec >>> 0).toString(2);

}
***document.getElementById("output").innerHTML = dec2bin(document.getElementById("input").innerHTML);***
</script>

谢谢!

Answer 1

我认为您使用了 this example作为代码的基础。

这里的区别在于您需要等待用户点击按钮。

您的代码现在所做的是在每次用户单击按钮时调用dec2bin('input')，但此方法仅执行计算。填充您的 output 的行是第二个“***”标记行，但它仅在页面加载时执行。

因此，与其在页面加载时执行document.getElementById("output").innerHTML = dec2bin(document.getElementById("input").value);，不如包装它带有一个函数，并在用户点击 button1 时使用它。

所以两个关键点是:

换行将获取input值并填充output

function convertUserInput(id) {
    document.getElementById("output").innerHTML = dec2bin(document.getElementById(id).value);
}

将该函数用作onclick 处理程序

<input type=button id="button1" value="calculate" onclick="convertUserInput('input');"/>

观察:当涉及到 input 元素时，IMO 最好使用 value 而不是 innerHTML。