时间戳

首页 > 解决方案 > 与JS不一致？

javascript - 与JS不一致？

问题描述

我正在制作一个简单的数据 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>

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

但是，我在函数“go”中使用了完全相同的代码，它正在工作。

标签： javascripthtml

解决方案

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

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

但clear存在于文件上：

console.log(document.clear);

因此，当您引用一个名为 的标识符时clear，它永远不会离开withs，因此您调用的函数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>

推荐阅读