在单独的位置中选择不同的选项时，如何更改元素的HTML <select>元件？

Question

So on my website, I'm trying to make it so that when you select a certain Course Name using the <select> element, you also change The HTML of the Course Description directly below it so that the Description corresponds with the course. Here's what I've got so far:

 < script > function myFunctionHTML() { document.getElementById('Course_Description').innerHTML = "I like coding" }; function myFunctionComp() { document.getElementById('Course_Description').innerHTML = "I like computers" }; var H = document.getElementById('Course_HTML').innerHTML; var C = document.getElementById('Course_Comp').innerHTML; var Course_Select = document.getElementById('Course_Name').innerHTML; function myFunctionVar() { if Course_Select = H { myFunctionHTML(); } if Course_Select = C { myFunctionComp(); } }; < /script> 

 <label class="w3-label w3-text-black">Course Name</label> <select id="Course_Name" name="Course_Name" onchange="myFunctionVar()" style="width:95%;" required> <option value="IntroHTML" id="Course_HTML">Intro to HTML and CSS</option> <option value="BuildComputers" id="Course_Comp">Build A Computer</option> </select> <label class="w3-label w3-text-black">Course Description</label> <p id="Course_Description">Hi there</p> 

I'm pretty sure the myFunctionVar() is just wrong, but after researching on other websites and other questions I can't seem to find anything.

Answer 1

No need write that much of code to just change innerHTML of an element by change in select options.

You can refactor your code to be very simple and more readable and even extendable for future options on select.

 var htmlDesc = "I like coding"; var compDesc = "I like computers"; //keep more course descriptions here function changeDescription(e) { var desc = compDesc; if(e.value === "IntroHTML") desc = htmlDesc; //default HTML description //keep more conditions to check for course selected document.getElementById('Course_Description').innerHTML = desc; //changing innerHTML of description holder }; 

 <label class="w3-label w3-text-black">Course Name</label> <select id="Course_Name" name="Course_Name" onchange="changeDescription(this);" style="width:95%;" required> <option value="IntroHTML" id="Course_HTML">Intro to HTML and CSS</option> <option value="BuildComputers" id="Course_Comp">Build A Computer</option> </select> <label class="w3-label w3-text-black">Course Description</label> <p id="Course_Description">I like coding</p> 

Answer 2

First of all, Remove ";" from functions. Then, you should get the value attribute of option and not innerHTML.

Answer 3

First get the value of selected option and then change the description

  var e = document.getElementById(selectId);
  var option = e.options[e.selectedIndex].value;

 function myFunctionHTML() { document.getElementById('Course_Description').innerHTML = "I like coding" } function myFunctionComp() { document.getElementById('Course_Description').innerHTML = "I like computers" } var H = document.getElementById('Course_HTML').innerHTML; var C = document.getElementById('Course_Comp').innerHTML; var Course_Select = document.getElementById('Course_Name').innerHTML; function myFunctionVar(selectId) { var e = document.getElementById(selectId); var option = e.options[e.selectedIndex].value; if (option === "IntroHTML") { myFunctionHTML(); } if (option === "BuildComputers") { myFunctionComp(); } } 

 <label class="w3-label w3-text-black">Course Name</label> <select id="Course_Name" name="Course_Name" onchange="myFunctionVar('Course_Name')" style="width:95%;" required> <option value="IntroHTML" id="Course_HTML">Intro to HTML and CSS</option> <option value="BuildComputers" id="Course_Comp">Build A Computer</option> </select> <label class="w3-label w3-text-black">Course Description</label> <p id="Course_Description">Hi there</p> 

Answer 4

here is the error free code of yours try to replace it, with your code and test is works as you expected. removed ; from you code corrected syntax error in `if condition

 function myFunctionHTML() {
    document.getElementById('Course_Description').innerHTML = "I like coding";
  }

function myFunctionComp() {
  document.getElementById('Course_Description').innerHTML = "I like computers";
}
var H = document.getElementById('Course_HTML').innerHTML;
var C = document.getElementById('Course_Comp').innerHTML;
var Course_Select =  document.getElementById('Course_Name').innerHTML;

function myFunctionVar() {
  if (Course_Select == 'H') {
    myFunctionHTML();
  }
  if (Course_Select == 'C') {
    myFunctionComp();
  }
}

Answer 5

Here is the full code

    <label class="w3-label w3-text-black">Course Name</label>
    <select id="Course_Name" name="Course_Name" onchange="myFunctionVar()" style="width:95%;" required>
    <option value="IntroHTML" id="Course_HTML">Intro to HTML and CSS</option>
    <option value="BuildComputers" id="Course_Comp">Build A Computer</option>
    </select>
    <label class="w3-label w3-text-black">Course Description</label>
    <p id="Course_Description">Hi there</p>
  <script>
            function myFunctionHTML()   {
                document.getElementById('Course_Description').innerHTML = "I like coding" 
            }
            function myFunctionComp()   {
                document.getElementById('Course_Description').innerHTML = "I like computers" 
            }

            function myFunctionVar()    {
      var H = document.getElementById('Course_HTML').innerHTML
            var C = document.getElementById('Course_Comp').innerHTML


      var e = document.getElementById("Course_Name");
            var Course_Select = e.options[e.selectedIndex].value;
        if (Course_Select == 'IntroHTML')
        {
         myFunctionHTML()
        }
        else if (Course_Select == 'BuildComputers')
        {
            myFunctionComp()
        }
      }
      </script>

Here is the fiddle

https://jsfiddle.net/ohd5r1ox/

Answer 6

I have made some Corrections in your code,Please try this..

 function myFunctionHTML() { document.getElementById('Course_Description').innerHTML = "I like coding"; }; function myFunctionComp() { document.getElementById('Course_Description').innerHTML = "I like computers"; }; var H = document.getElementById('Course_HTML').value; var C = document.getElementById('Course_Comp').value; function myFunctionVar() { var Course_Select = document.getElementById('Course_Name').value; if (Course_Select == H) { myFunctionHTML(); } if (Course_Select == C) { myFunctionComp(); } }; 

 <label class="w3-label w3-text-black">Course Name</label> <select id="Course_Name" name="Course_Name" onchange="myFunctionVar()" style="width:95%;" required> <option value="IntroHTML" id="Course_HTML">Intro to HTML and CSS</option> <option value="BuildComputers" id="Course_Comp">Build A Computer</option> </select> <label class="w3-label w3-text-black">Course Description</label> <p id="Course_Description">Hi there</p>