Question

几天前我的工作形式比较复杂，但突然间它停止了工作，我在保存版本时就垃圾了，所以我已经把它恢复到了基础，我可以＆＃39 ;让它工作。我究竟做错了什么？我是否正确使用onInput？

<input type="text" id="number-of-copies-value" onInput="quote()" value="500">
<span id="total-cost-value">0.00</span>

这是Javascript：

function quote() {
            var totalcostvalue = document.getElementById("total-cost-value");
            var numberofcopiesvalue = document.getElementById("number-of-copies-value").value;
            var totalcost = (+numberofcopiesvalue);

            totalcostvalue.innerHTML=totalcost.toFixed(2);

        }

        quote();

https://jsfiddle.net/tod0wusv/1/

Answer 1

您的HTML希望quote()功能全局可用。确保是这种情况。

如果我改变你的小提琴，让quote()在全局窗口对象上可用，

window.quote = function quote() {
    // ...
};

小提琴再次开始工作。

<强> WORKING FIDDLE

如果我使用您的内容创建本地HTML文件，它会立即生效，这是有道理的，因为quote()是在全局范围内定义的。

看起来JSfiddle在函数范围内执行JavaScript会破坏您的quote()调用。

Answer 2

如果您关心浏览器兼容性，我建议使用带有setTimeout函数的onkeydown事件，如此处所述Detecting "value" of input text field after a keydown event in the text field?

要在JSFiddle中使用此功能，请将JavaScript设置中的javascript“加载类型”设置更改为“无包装”选项之一。

<强> HTML

<input type="text" id="number-of-copies-value" onkeydown="window.setTimeout(function() { quote(); }, 1)" value="500">
<span id="total-cost-value">0.00</span>

<强> JavaScript的：

function quote() {
    var totalcostvalue = document.getElementById("total-cost-value");
    var numberofcopiesvalue = document.getElementById("number-of-copies-value").value;
    var totalcost = (+numberofcopiesvalue);
    totalcostvalue.innerHTML = totalcost.toFixed(2);

}

quote();

我已经更新了你的JSFiddle ......

https://jsfiddle.net/tod0wusv/6/

当我更改数字输入时，获取跨度的内容

2 个答案: