如何将单选按钮的内联 onClick 功能更改为单独的脚本

Question

我想将内联 js 函数更改为普通的 JS 脚本，用于 Chrome 扩展。

示例代码

<!DOCTYPE html>
<html>
<body>

<p>Select your favorite browser:</p>
<form action="/action_page.php">
    <input type="radio" name="browser" onclick="myFunction(this.value)" value="Internet Explorer">Internet Explorer<br>
    <input type="radio" name="browser" onclick="myFunction(this.value)" value="Firefox">Firefox<br>
    <input type="radio" name="browser" onclick="myFunction(this.value)" value="Opera">Opera<br>
    <input type="radio" name="browser" onclick="myFunction(this.value)" value="Google Chrome">Google Chrome<br>
    <input type="radio" name="browser" onclick="myFunction(this.value)" value="Safari">Safari<br><br>

    Your favorite browser is: <input type="text" id="result">
    <input type="submit" value="Submit form">
</form>

<script>
function myFunction(browser) {
    document.getElementById("result").value = browser;
}
</script>

</body>
</html>

这是我尝试过的方法，但没有按预期工作

<!DOCTYPE html>
<html>
<body>

<p>Select your favorite browser:</p>
<form action="/action_page.php">
  <input type="radio" name="browser"  value="Internet Explorer">Internet Explorer<br>
  <input type="radio" name="browser"  value="Firefox">Firefox<br>
  <input type="radio" name="browser"  value="Opera">Opera<br>
  <input type="radio" name="browser"  value="Google Chrome">Google Chrome<br>
  <input type="radio" name="browser"  value="Safari">Safari<br><br>

  Your favorite browser is: <input type="text" id="result">
  <input type="submit" value="Submit form">
</form>

<script>
const browsers = document.getElementsByName("browser");
browsers.forEach(function(browser){
  myFunction(browser.value);
});
function myFunction(browser) {
  document.getElementById("result").value = browser;
}
</script>

</body>
</html>

这个怎么解决。我想更改 radioButton 的值 onChange/onClick。

Answer 1

在您的新代码中，您需要为每次选择单选按钮时添加一个事件侦听器。您的代码从不调用例程来更改任何内容。

Answer 2

在您的第二个示例中，您忘记实际添加 myFunction 函数作为事件侦听器。为此，您应该看看 addEventListener.

您的脚本必须是这样的：

<script>
const browsers = document.getElementsByName("browser");
browser.forEach(function(browser) {
  browser.addEventListener('click', function() {
    myFunction(browser);
  });
});
function myFunction(browser) {
  document.getElementById("result").value = browser;
}
</script>

我们必须在 myFunction 周围创建一个匿名函数的原因是我们用参数调用它。如果我们简单地传递 myFunction(browser)，该函数将被简单地执行，而不是作为回调传递给事件监听器

Answer 3

以下与第一个答案非常相似，但我为 OP 添加了一些测试代码以评估未来的努力。

<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Test Page </title>
<body>
<!-- Modified from: 
  
-->
<p>Select your favorite browser:</p>

<!--
    Following replaces: <form action="/action_page.php"> in original
    Following FORM actions are for testing purposes ONLY 
    Replace with correct FORM actions when necessary
-->
<!-- <form action="javascript:alert('success')"> -->
<form action="javascript:submitParameters()">

  <label><input type="radio" name="browser"  value="Internet Explorer">Internet Explorer</label><br>
  <label><input type="radio" name="browser"  value="Firefox">Firefox</label><br>
  <label><input type="radio" name="browser"  value="Opera">Opera</label><br>
  <label><input type="radio" name="browser"  value="Google Chrome">Google Chrome</label><br>
  <label><input type="radio" name="browser"  value="Safari">Safari</label><br>
  <br>
  Your favorite browser is: <input type="text" id="result">
  <br><input type="submit" value="Submit form">
</form>

<script>
const browsers = document.getElementsByName("browser");
browsers.forEach(function(browser, ndx) {
  browser.addEventListener('click', function() { myFunction(browser, ndx); });
});
function myFunction(browser, ndx) {
  document.getElementById("result").value = ndx+' : '+browser.value;
}
</script>

<script>
function submitParameters() {  // for FORM submit testing purposes only
  let tmp = document.getElementById('result').value;
  // do nothing messages for results evaluation with a small error check test
  if (tmp !== '') { alert('Selection: '+tmp); } else { alert('Selection is missing'); }
}
</script>

</body>
</html>

我一直想知道在 SUBMIT 时发送到 FORM 的是什么。我将 'javascript:alert' 添加到报告此操作中。
使用 'javascript:function' 较短的格式

也可以完成同样的事情

传递无效数据是不受欢迎的，最好避免。我在 'submitParameters()' 函数中添加了一个测试，以在没有选择单选按钮时报告缺少的选择。

有时，希望通过 SUBMIT 向 FORM 报告的选择是选择的索引，在此示例中编号为 0-4。我在传递所选选项索引的 .forEach 函数中添加了代码。完全没有必要，但在未来的代码中可能会用到。

编码愉快，节日快乐！

如何将单选按钮的内联 onClick 功能更改为单独的脚本

How to change inline onClick function of radio button to a separate script

javascript

function

google-chrome-extension

node.js