与JS不一致？

Question

我正在制作一个简单的数据 url 制作器，我想知道为什么我的清除按钮的代码不起作用，而其他具有完全相同代码的部分正在工作。

 function go() { var string = document.getElementById("input").value; var encodedString = btoa(string); document.getElementById("output").value = "data:text/html;base64," + encodedString; } function copy() { var copyText = document.getElementById("output"); copyText.select(); copyText.setSelectionRange(0, 99999) document.execCommand("copy"); } function clear() { document.getElementById("output").value = ""; document.getElementById("input").value = ""; } var input = document.getElementById("input"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("go").click(); } });

 button { font-family: 'Baloo 2', cursive; background-color: lightgrey; } input { font-family: 'Baloo 2', cursive; }

 <link href="https://fonts.googleapis.com/css?family=Baloo+2&display=swap" rel="stylesheet"> <input id="input" type="text" size="160" placeholder="HTML here" value=""> <button onclick="clear()">&#x1f7aa;</button> <button id="go" onclick="go()">Convert</button> <br><br> <input type="text" placeholder="Output here" id="output" size="160"> <button onclick="copy()">Copy text</button>

在底部附近，名为“clear”的功能不起作用。 当我点击调用该函数的按钮时，什么也没有发生。

但是，我在函数“go”中使用了完全相同的代码，该代码正在运行。

Answer 1

当您使用内联处理程序时，处理程序包含在两个with语句中：一个用于处理程序所在的元素，另一个用于文档。 您的代码正在执行以下操作：

with (document) {
  with (button) {
    clear();
  }
}

但文件上clear存在：

 console.log(document.clear);

因此，当您引用名为clear的标识符时，它永远不会脱离with s，因此您称为clear的函数永远不会运行。

使用不同的变量名称，例如clearInputAndOutput ：

 function go() { var string = document.getElementById("input").value; var encodedString = btoa(string); document.getElementById("output").value = "data:text/html;base64," + encodedString; } function copy() { var copyText = document.getElementById("output"); copyText.select(); copyText.setSelectionRange(0, 99999) document.execCommand("copy"); } function clearInputAndOutput() { document.getElementById("output").value = ""; document.getElementById("input").value = ""; } var input = document.getElementById("input"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("go").click(); } });

 button { font-family: 'Baloo 2', cursive; background-color: lightgrey; } input { font-family: 'Baloo 2', cursive; }

 <link href="https://fonts.googleapis.com/css?family=Baloo+2&display=swap" rel="stylesheet"> <input id="input" type="text" size="160" placeholder="HTML here" value=""> <button onclick="clearInputAndOutput()">&#x1f7aa;</button> <button id="go" onclick="go()">Convert</button> <br><br> <input type="text" placeholder="Output here" id="output" size="160"> <button onclick="copy()">Copy text</button>

但是使用 Javascript 正确附加事件处理程序会好得多。 内联处理程序有太多的范围和转义问题，最好避免。 改用addEventListener ，您就不必担心名称冲突或全局变量问题：

 const [clearBtn, goBtn, copyBtn] = document.querySelectorAll('button'); clearBtn.addEventListener('click', () => { document.getElementById("output").value = ""; document.getElementById("input").value = ""; }); goBtn.addEventListener('click', () => { var string = document.getElementById("input").value; var encodedString = btoa(string); document.getElementById("output").value = "data:text/html;base64," + encodedString; }); copyBtn.addEventListener('click', () => { var copyText = document.getElementById("output"); copyText.select(); copyText.setSelectionRange(0, 99999) document.execCommand("copy"); }); var input = document.getElementById("input"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("go").click(); } });

 button { font-family: 'Baloo 2', cursive; background-color: lightgrey; } input { font-family: 'Baloo 2', cursive; }

 <link href="https://fonts.googleapis.com/css?family=Baloo+2&display=swap" rel="stylesheet"> <input id="input" type="text" size="160" placeholder="HTML here" value=""> <button>&#x1f7aa;</button> <button id="go">Convert</button> <br><br> <input type="text" placeholder="Output here" id="output" size="160"> <button>Copy text</button>

Answer 2

作为解决方案，您可以将函数名称“clear”更改为其他名称。 可能会被误认为是 JavaScript 的默认函数同名，例如 document.clear