Javascript, If Else Statement using a button and List

Question

I want to create Charts at the end of this project and have some options you can choose for the chart you want to create. There is a dropdown list with a few options: what kind of chart you want to have and checkboxes for the data that is going to be in it. To my problem, I want to program an if else statement which gives me a feedback when the statement is true, it should show me an alert with "true" in it.

I already have a function that gets me the selected value of the list, but if I build up the if else statement I don't get the expected result. I´ll therefore show you the code:

<button id="button" onclick="function2()"><strong>create Chart</strong> </button>

<script>

      function getSelectValue()
      {
          var selectedValue=document.getElementById("Grafikliste").value;
          console.log(selectedValue)
      }
      getSelectValue();


      if (selectedValue=="balkendiag")
      {
         button.onclick(alert("True"))
      }
      else {
          alert("Error!!!")
      }
  }

and here you see the code for the list

<select id ="Grafikliste" onchange="getSelectValue()">
        <option value="balkendiag">Balkendiagramm</option>

You are declaring `selectedValue` inside the function, which means that it does not exist outside of it. Then if you try to access it outside, the value will be `undefined`. — Peter B, Dec 28 '17 at 10:47
Instead or setting and logging, return this value and use it in `if` condition — Rajesh, Dec 28 '17 at 10:47
When you write questions in the future, please consider that it would be very helpful for us if you make sure the description of the problem is written properly (good grammar, more new lines when it is appropriate). Also it will be helpful if you provide as more code as possible to avoid confusion. It requires more time to prepare it, but it is worth it. — victor175, Dec 28 '17 at 10:55

Guillaume Georges · Accepted Answer · 2017-12-28T11:07:56.980

There are a few issues in your code.

If / Else not working as intended :

This is a scope problem. Read more about this here

Your selectedValue variable is local to the getSelectedValue function. It can't be seen from outside of your function.

You can fix it by declaring it as a global variable, for instance :

var selectedValue; 
function getSelectValue() {
  selectedValue=document.getElementById("Grafikliste").value;
  console.log(selectedValue)
}
getSelectValue();

if (selectedValue=="balkendiag") {
  button.onclick(alert("True"))
} else {
  alert("Error!!!")
}

or making your function return the value :

function getSelectValue() {
  var selectedValue=document.getElementById("Grafikliste").value;
  console.log(selectedValue);
  return selectedValue;
}


if (getSelectValue() =="balkendiag") {
  button.onclick(alert("True"))
} else {
  alert("Error!!!")
}

2. Event handling

To react to user events (such as a click on a button), you should not be using onclick in your HTML button, you should use addEventListener function instead.

Code Snippet with all of it fixed :

function getSelectValue()
{
    var selectedValue=document.getElementById("Grafikliste").value;
    console.log(selectedValue);
    return selectedValue;
}

function function2() {

    if (getSelectValue()=="balkendiag")
    {
       alert("True");
    } else {
        alert("Error!!!");
    }
}

document.getElementById("button").addEventListener("click", function2);
document.getElementById("Grafikliste").addEventListener("change", function2);

<button id="button"><strong>create Chart</strong> </button>

<select id="Grafikliste" >
        <option value="balkendiag">Balkendiagramm</option>
</select>

score 0 · Answer 2 · answered Dec 28 '17 at 10:48

0

You have used selectedValue with keyword var inside getSelectValue function, restricting the keyword to be local for that function. Consider removing var to fix your problem

answered Dec 28 '17 at 10:48

Satyakam Ghude

31
4

Jonas Wilms · Answer 3 · 2017-12-28T11:05:13.880

At first, inline listeners (onclick="") are deprecated

<button id="create"><strong>create Chart</strong> </button>
<select id ="diagramType">
    <option value="balkendiag">Balkendiagramm</option>
    <option value="baumdiag">Baumdiagramm</option>
</select>

Now inside the js code, we firstly need to await the page to be loaded, then we can get our elements and assign a listener to the button and get the select's value when the button was clicked:

 window.onload = function(){
   //get the elements
   const diagramType = document.getElementById("diagramType"),
         create = document.getElementById("create");
   //if create was clicked
   create.onclick = function(){
     //switch based on fhe diagramTypes value
     switch(diagramType.value){
       case "balkendiag" :
          alert("Balkendigramm!");
       break;
       //...
     }
  };
 };

Try it out!

PS: That you cant access a variable usually means that you should restructure your code...

Javascript, If Else Statement using a button and List

3 Answers3