JS: one function and two Document.getElementById() with the same results in "undefined"-CodePudding

In my JS file I have a function where I use two variables, choice and courseChosen. The latter needs to be converted to an object first. My html tags are courseName and courseInfo for choice and courseChosen, respectively. These share the this.value is shared by both (they're are supposed to return the same "value"), and this.value also refers to one id (id=course) in the html file.

The Document.getElementById() that refers to courseChosen returns "undefined" as a value whilst the other returns what's expected/selected.

HTML: (...)

\<div\>

\<select id="course" multiple size="3" onchange="choiceMade(this.value);"\>
\<select id="course" multiple size="3" onchange="choiceMade(this.value);"\> 
\<option value="" selected\>--Choose--\</option\>
\<option value="angular"\>Angular\</option\>
\<option value="reactjs"\>React\</option\>
\<option value="vuejs"\>Vue\</option\>
\<option value="JavaScript"\>JavaScript\</option\>
\<option value="Python"\>Python\</option\>

</select>

</div>


<div> <p>
<div id="courseInfo"> </div>
</p></div>

<div id="favorites">
<div>
<label >Favorite Instructor:</label>
</div>

<div>
<label >Favorite Instructor:</label>
<input type="text" id="courseName" pattern="[A-Za-z]{1,}[ ]{0,2}">
</div>

(...)

JS:

(...)

var instructor = "Axle Barr";

class Course {
     constructor(courseName, instructor) {
          this.courseName = courseName;
          this.instructor = instructor;
      };
      about() {
          return this.courseName   " is being taught by "   this.instructor;
      }
 };  


function choiceMade(choice, courseChosen) {

document.getElementById("courseName").value = choice;   

currentCourse = new Course(courseChosen, instructor); //object

document.getElementById("courseInfo").innerHTML = currentCourse.about();

CodePudding user response：

everything is right expect the functions declaration. You can replace the function choiceMade as below -

function choiceMade(choice) {

document.getElementById("courseName").value = choice;   

currentCourse = new Course(choice, instructor); //object

document.getElementById("courseInfo").innerHTML = currentCourse.about();