How do I iteratively show on click a selection value, a div or another div?-CodePudding

I have a problem in iteratively displaying a div, on the click of a selected value.

When I select the disease Pancreatitis or Glycemia, I display "We are sorry but for this disease, you must consult a doctor" and when I choose Nothing, I display "It's ok". By default, I have to show "it's ok".

I have the following code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div  onchange="change(this)" id="malattie">
    <label>Are you affected by one of the following conditions?
    <select id="malattie">
        <option value="Nothing">Nothing</option>
        <option value="Pancreatitis">Pancreatitis</option>
        <option value="Glycemia">Glycemia</option>
    </select>
    <div id="alert"></div>
    <div id="form_nodisease">It's ok</div>
    <script>
        function change(myselect){
            if(myselect !="Nothing"){
                document.getElementById("form_nodisease").style.display = 'none'; 
                document.getElementById("alert").innerHTML="We are sorry but for this disease you must consult a doctor"
            }else{
                document.getElementById("form_nodisease").style.display = 'block'; 
            }
        }
    </script>
</body>
</html>

When I click on Pancreatitis or Glycemia, I correctly show "We are sorry but for this disease, you must consult a doctor", but when I click on Nothing, I still see "We are sorry but for this disease, you must consult a doctor" instead of "It's ok".

It is like it doesn't recognize the change in selection value. How do I iteratively show a selection value, a div, or another div on click?

CodePudding user response：

I'd do it like this:

function change(myselect) {
  if (myselect.value != "Nothing") {
    document.getElementById("form_nodisease").style.display = 'none';
    document.getElementById("alert").style.display = 'block';

  } else {
    document.getElementById("form_nodisease").style.display = 'block';
    document.getElementById("alert").style.display = 'none';
  }
}

<div >
  <label>Are you affected by one of the following conditions?
    <select id="malattie" onchange="change(this)">
      <option value="Nothing">Nothing</option>
      <option value="Pancreatitis">Pancreatitis</option>
      <option value="Glycemia">Glycemia</option>
    </select>
    <div id="alert" style="display: none;">We are sorry but for this disease you must consult a doctor</div>
    <div id="form_nodisease">It's ok</div>
  </label>
</div>

I have made some changes, for example you had a duplicate id, and the text of the alert is written at the beginning but depending on what you select, it is displayed or not.

CodePudding user response：

The onChange attribute was not at the correct place and you need to check for myselect.value.

I have also removed alert and just changed the innerHTML of the form_nodisease class.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div  id="malattie">
<label>Are you affected by one of the following conditions?
<select id=malattie onchange="change(this)">
    <option value="Nothing">Nothing</option>
    <option value="Pancreatitis">Pancreatitis</option>
    <option value="Glycemia">Glycemia</option>
</select>
<div id="form_nodisease">It's ok</div>
<script>
function change(myselect){
if(myselect.value !="Nothing"){
  document.getElementById("form_nodisease").innerHTML="We are sorry but for this disease you must consult a doctor" 
}else{  
  document.getElementById("form_nodisease").innerHTML="ok!"
}}
</script>
</body>
</html>