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

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