How can use elements "getElementById("site") and getElementById("button")&q-CodePudding

I tried to use more than one "List" with changing names of getElementById("site") and getElementById("button") but it dosent work well.

The "submit" button dosnt work correctly I want each button do separately and open link from own list.

This example for 3 list, but I have more than 10 lists with same name but different addresses.

HTML code:

<html>

<body>
    <form method="get">
        <label for="Links">Choose a Site:</label>
        <select id="site01" name="site">
            <option value="Google">Google</option>
            <option value="Yahoo">Yahoo</option>
            <option value="MSN">MSN</option>
        </select>
    </form>
    <button type="button" id="button01">Submit</button>
    <script src="script1.js"></script>
    <form method="get">
        <label for="Links">Choose a Site:</label>
        <select id="site02" name="site">
            <option value="Google">Google</option>
            <option value="Yahoo">Yahoo</option>
            <option value="MSN">MSN</option>
        </select>
    </form>
    <button type="button" id="button02">Submit</button>
    <script src="script1.js"></script>
    <form method="get">
        <label for="Links">Choose a Site:</label>
        <select id="site03" name="site">
            <option value="Google">Google</option>
            <option value="Yahoo">Yahoo</option>
            <option value="MSN">MSN</option>
        </select>
    </form>
    <button type="button" id="button03">Submit</button>
    <script src="script1.js"></script>
</body>

</html>

script1.js code

var select = document.getElementById('site01');

document.getElementById("button01").onclick = function(){
    var value = select.value
    if (value == "Google")
    {
        window.open('https://www.google01.com', '_blank');
    }
    else if (value == "Yahoo")
    {
        window.open('https://www.yahoo01.com', '_blank');
    }
    else if (value == "MSN")
    {
        window.open('https://www.msn01.com', '_blank');
    }
};

var select = document.getElementById('site02');

document.getElementById("button02").onclick = function(){
    var value = select.value
    if (value == "Google")
    {
        window.open('https://www.google02.com', '_blank');
    }
    else if (value == "Yahoo")
    {
        window.open('https://www.yahoo02.com', '_blank');
    }
    else if (value == "MSN")
    {
        window.open('https://www.msn02.com', '_blank');
    }
};

var select = document.getElementById('site03');

document.getElementById("button03").onclick = function(){
    var value = select.value
    if (value == "Google")
    {
        window.open('https://www.google03.com', '_blank');
    }
    else if (value == "Yahoo")
    {
        window.open('https://www.yahoo03.com', '_blank');
    }
    else if (value == "MSN")
    {
        window.open('https://www.msn03.com', '_blank');
    }
};

whats wrong ?

CodePudding user response：

When change select option, you didn't store changed value that's why always you show first loaded data that's why its not working exactly.

Please check following codes and run it in your environmnet.

var selectValue = document.getElementById('site01').value;

document.getElementById('site01').addEventListener('change', function() {
  selectValue = this.value;
});

document.getElementById("button01").onclick = function(){
    if (selectValue == "Google")
    {
        window.open('https://www.google01.com', '_blank');
    }
    else if (selectValue == "Yahoo")
    {
        window.open('https://www.yahoo01.com', '_blank');
    }
    else if (selectValue == "MSN")
    {
        window.open('https://www.msn01.com', '_blank');
    }
};

Hopefully, now it'll be worked, thank you.

CodePudding user response：

The issue with the code is that, you are keep on updating value for select as

var select = document.getElementById('site01'); // First
var select = document.getElementById('site02'); // Second
var select = document.getElementById('site03'); // Third

Your select variable is declared in global scope, so updating one value will reflect all elements.

Fix to your issue

Move the declaration of select inside the the click listner. This will be redeclared each tim when user clicks the button and hence, the value will be taken correctly.

Working Fiddle

document.getElementById("button01").onclick = function () {
  const select = document.getElementById('site01');
  const value = select.value
  if (value == "Google") {
    window.open('https://www.google01.com', '_blank');
  }
  else if (value == "Yahoo") {
    window.open('https://www.yahoo01.com', '_blank');
  }
  else if (value == "MSN") {
    window.open('https://www.msn01.com', '_blank');
  }
};

document.getElementById("button02").onclick = function () {
  const select = document.getElementById('site02');
  const value = select.value
  if (value == "Google") {
    window.open('https://www.google02.com', '_blank');
  }
  else if (value == "Yahoo") {
    window.open('https://www.yahoo02.com', '_blank');
  }
  else if (value == "MSN") {
    window.open('https://www.msn02.com', '_blank');
  }
};

document.getElementById("button03").onclick = function () {
  const select = document.getElementById('site03');
  const value = select.value
  if (value == "Google") {
    window.open('https://www.google03.com', '_blank');
  }
  else if (value == "Yahoo") {
    window.open('https://www.yahoo03.com', '_blank');
  }
  else if (value == "MSN") {
    window.open('https://www.msn03.com', '_blank');
  }
};

<form method="get">
  <label for="Links">Choose a Site:</label>
  <select id="site01" name="site" data-node="01">
    <option value="Google">Google</option>
    <option value="Yahoo">Yahoo</option>
    <option value="MSN">MSN</option>
  </select>
</form>
<button type="button" id="button01">Submit</button>
<form method="get">
  <label for="Links">Choose a Site:</label>
  <select id="site02" name="site" data-node="02">
    <option value="Google">Google</option>
    <option value="Yahoo">Yahoo</option>
    <option value="MSN">MSN</option>
  </select>
</form>
<button type="button" id="button02">Submit</button>
<form method="get">
  <label for="Links">Choose a Site:</label>
  <select id="site03" name="site" data-node="03">
    <option value="Google">Google</option>
    <option value="Yahoo">Yahoo</option>
    <option value="MSN">MSN</option>
  </select>
</form>
<button type="button" id="button03">Submit</button>

What happens with this is, the value for select will be holding the last node finally, that is the element with id site03. So your select will be holding the value of the third node always. So even if you click the first button or the second button, it will take the value from the third node.

Also donot call <script src="script1.js"></script> multiple time from template. This should be done only once, best to keep at the bottom of your template section.

Better Approach

Better approach is to, select all your buttons using document.querySelectorAll("[type='button']") and add a click event listner to that. Inside the click event listner, select the targeted select node by accessing the select using e.currentTarget.previousElementSibling.querySelector('select'). You can see the code comment how this selector will point to the required target.

To make the urls dyynamic, you can have some custom data attributes in the select element and check the value for the corresponding data attributes inside the change event. I have added a custom data-node to each select and fetched the value from the change event using select.getAttribute('data-node')

Working Code

document.querySelectorAll("[type='button']").forEach((node) => {
  node.onclick = function (e) {
    const select = e.currentTarget.previousElementSibling.querySelector('select');
    // e.currentTarget => clicked button
    // e.currentTarget.previousElementSibling = Form ust above the button
    // e.currentTarget.previousElementSibling.querySelector('select') = Select inside the form
    const value = select.value
    const nodeAppender = select.getAttribute('data-node');
    console.log(value);
    if (value == "Google") {
      window.open(`https://www.google${nodeAppender}.com`, '_blank');
    }
    else if (value == "Yahoo") {
      window.open(`https://www.yahoo${nodeAppender}.com`, '_blank');
    }
    else if (value == "MSN") {
      window.open(`https://www.msn${nodeAppender}.com`, '_blank');
    }
  };
})

<form method="get">
  <label for="Links">Choose a Site:</label>
  <select id="site01" name="site" data-node="01">
    <option value="Google">Google</option>
    <option value="Yahoo">Yahoo</option>
    <option value="MSN">MSN</option>
  </select>
</form>
<button type="button" id="button01">Submit</button>
<form method="get">
  <label for="Links">Choose a Site:</label>
  <select id="site02" name="site" data-node="02">
    <option value="Google">Google</option>
    <option value="Yahoo">Yahoo</option>
    <option value="MSN">MSN</option>
  </select>
</form>
<button type="button" id="button02">Submit</button>
<form method="get">
  <label for="Links">Choose a Site:</label>
  <select id="site03" name="site" data-node="03">
    <option value="Google">Google</option>
    <option value="Yahoo">Yahoo</option>
    <option value="MSN">MSN</option>
  </select>
</form>
<button type="button" id="button03">Submit</button>