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

I want to change the inline js function to a normal JS script for Chrome Extention.

example code

<!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>

This is what I tried but it's not working as expected

<!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>

How to solve is this. I want to change the value onChange/onClick of radioButton .

CodePudding user response：

In your second example, you forgot to actually add the myFunction function as an event listener. For that, you should take a look at addEventListener.

Your script would have to be something like this:

<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>

The reason we have to create an anonymous function around myFunction is because we are calling it with a parameter. If we simply passed myFunction(browser), the function would simply be executed and not passed as a callback to the event listener

CodePudding user response：

In your new code you need to add an event listener for each time the radio button is selected. Your code never calls the routine to change anything.