Question 52094 in Javascript Question posted in
A very good W3school tutorial can be found here.

javascript, I'm new to javascript, from value from the drop-down list I need to change the class

please tell me how to transfer the values through the drop-down list to another page

<select id="checkOpt" >
  <option value="Win">Win</option>
  <option value="Def">Def</option>
  <option value="Play">Play</option>
</select>

I’m new to javascript, from value from the drop-down list I need to change the class

const classColor = document.getElementById('classColor');
const checkOpt   = document.getElementById('checkOpt');
if (checkOpt.option == "Win") {
  classColor.classList.add('myb-SettledBetParticipant_Won');
  classColor.classList.remove('myb-SettledBetParticipant_Lost');
}
if (checkOpt.option == "Def") {
  classColor.classList.add('myb-SettledBetParticipant_Lost');
  classColor.classList.remove('myb-SettledBetParticipant_Won');
} else if (checkOpt.option == "Play") {

};

I tried a lot of variations, constant mistakes

Cannot read properties of null (reading ‘classList’)

I don’t fully understand the logic and make a mistake, I can’t understand where exactly

Perhaps it needs to be done through for, but I can’t find the information in detail anywhere

 <div id="classColor" class="myb-SettledBetParticipant myb-SettledBetParticipant_Lost ">

located on another page

Tags:

2

Answers


  1. 0 
    <select id="checkOpt">
  <option value="Win">Win</option>
  <option value="Def">Def</option>
  <option value="Play">Play</option>
</select>
<div id="classColor">Change my class</div>
<script>

const classColor = document.getElementById('classColor');
const checkOpt = document.getElementById('checkOpt');

checkOpt.addEventListener('change', () => {
  const selectedOption = checkOpt.value;

  if (selectedOption === "Win") {
    classColor.classList.add('myb-SettledBetParticipant_Won');
    classColor.classList.remove('myb-SettledBetParticipant_Lost');
  } else if (selectedOption === "Def") {
    classColor.classList.add('myb-SettledBetParticipant_Lost');
    classColor.classList.remove('myb-SettledBetParticipant_Won');
  } else if (selectedOption === "Play") {
    classColor.classList.remove('myb-SettledBetParticipant_Won');
    classColor.classList.remove('myb-SettledBetParticipant_Lost');
  }
});

</script>

check this maybe this will help you
    Login or Signup to reply.
  2. 0

    selected value from the drop-down list to another page, you can use a form element with a hidden input field that holds the selected value. Then, when the form is submitted, you can access the value on the other page using the request object.
    On the first page:

    <form action="second_page.html" method="GET">
  <select id="checkOpt" name="checkOpt">
    <option value="Win">Win</option>
    <option value="Def">Def</option>
    <option value="Play">Play</option>
  </select>
  <button type="submit">Submit</button>
  <input type="hidden" name="classColor" id="classColorInput">
</form>

<script>
  const classColor = document.getElementById('classColor');
  const checkOpt = document.getElementById('checkOpt');
  const classColorInput = document.getElementById('classColorInput');

  checkOpt.addEventListener('change', (event) => {
    const selectedOption = event.target.value;
    if (selectedOption === 'Win') {
      classColor.classList.add('myb-SettledBetParticipant_Won');
      classColor.classList.remove('myb-SettledBetParticipant_Lost');
    } else if (selectedOption === 'Def') {
      classColor.classList.add('myb-SettledBetParticipant_Lost');
      classColor.classList.remove('myb-SettledBetParticipant_Won');
    } else {
      classColor.classList.remove('myb-SettledBetParticipant_Lost');
      classColor.classList.remove('myb-SettledBetParticipant_Won');
    }
    classColorInput.value = selectedOption;
  });
</script>

    On the second page, you can access the value of checkOpt and classColor using the request object. For example, in PHP:

    <?php
$checkOpt = $_GET['checkOpt'];
$classColor = $_GET['classColor'];
?>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search