JS-переключатель на основе выбранной опции

Question

Я пытаюсь написать простой JS-переключатель, который будет отображать контент на основе выбора, поэтому давайте скажем, что у меня будет html doc с 4 div, если пользователь выберет опцию one div one будет отображаться и т. Д.

Здесь быстрый проект, который я сделал, но он не работает. Не могли бы вы помочь мне понять, что я здесь делаю неправильно?

HTML

<legend>Selecting elements</legend> 
      <p> 
      <label>Select list</label> 
      <select id = "myList"> 
       <option value = "1">one</option> 
       <option value = "2">two</option> 
       <option value = "3">three</option> 
       <option value = "4">four</option> 
      </select> 
      </p> 
     </fieldset> 
     <p id ="demo"></p> 

JS

function myfunction() { 
     var text; 
     var city = getElementById("myList").value; 

     switch(city) { 
      case "one": 
      text ="test one"; 
      break; 

      case "two": 
      text ="test two"; 
      break; 

      case "three": 
      text ="test three"; 
      break; 

      case "four": 
      text = "test four"; 
      break; 

      default: 
      text = " "; 
      } 
      document.getElementById("demo").innerHTML = text; 
      } 

Answer 1

Есть несколько вопросов, с кодом

function myfunction() { 
 
    var text; 
 
    var city = document.getElementById("myList").value; //need to use document.getElementById() 
 

 
    switch (city) { 
 
    //the select values are 1, 2, 3 not one, two etc 
 
    case "1": 
 
     text = "test one"; 
 
     break; 
 

 
    case "2": 
 
     text = "test two"; 
 
     break; 
 

 
    case "3": 
 
     text = "test three"; 
 
     break; 
 

 
    case "4": 
 
     text = "test four"; 
 
     break; 
 

 
    default: 
 
     text = " "; 
 
    } 
 
    document.getElementById("demo").innerHTML = text; 
 
}

<legend>Selecting elements</legend> 
 
<p> 
 
    <label>Select list</label> 
 
    <!--Need to call myfunction on change of the select--> 
 
    <select id="myList" onchange="myfunction()"> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
    <option value="4">four</option> 
 
    </select> 
 
</p> 
 
</fieldset> 
 
<p id="demo"></p>

---

Если вы просто хотите, чтобы показать заранее заданный текст, то

var mymap = { 
 
    1: "test one", 
 
    2: 'test two', 
 
    3: 'test three', 
 
    4: 'test four' 
 
} 
 

 
function myfunction() { 
 
    var city = document.getElementById("myList").value; //need to use document.getElementById() 
 
    var text = mymap[city] || ' '; 
 
    document.getElementById("demo").innerHTML = text; 
 
}

<legend>Selecting elements</legend> 
 
<p> 
 
    <label>Select list</label> 
 
    <!--Need to call myfunction on change of the select--> 
 
    <select id="myList" onchange="myfunction()"> 
 
    <option value="1">one</option> 
 
    <option value="2">two</option> 
 
    <option value="3">three</option> 
 
    <option value="4">four</option> 
 
    </select> 
 
</p> 
 
</fieldset> 
 
<p id="demo"></p>

Answer 2

OnChange = "MyFunction()"

добавить это для называть вашу функцию