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 ：对于value元素，IMO最好使用innerHTML而不是input。