JS函数中courseChosen变量返回undefined问题求助

问题描述 #

JS中定义的choiceMade函数，原本意图让choice和courseChosen共享<select>标签的选中值，其中courseChosen用于实例化Course对象并在courseInfo区域展示课程信息，但实际courseInfo显示undefined is being taught by Axle Barr，而courseName输入框能正常获取所选值。

错误原因 #

1. 参数传递不匹配：HTML中调用choiceMade(this.value)仅传入一个参数，但JS函数定义了两个参数choice, courseChosen，导致第二个参数courseChosen默认值为undefined。
2. 变量作用误解：courseChosen无需作为独立参数传递，它本质就是<select>的选中值，直接复用传入的选中值即可。
3. 未处理空选择场景：当选中默认的--Choose--选项时，value为空字符串，直接实例化对象会导致异常内容展示。

修正后的代码 #

HTML代码

<div>
  <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 class="standoutLabel">Favorite Instructor:</label>
  </div>
  <div>
    <label class="standoutLabel">Favorite Instructor:</label>
    <input type="text" id="courseName" pattern="[A-Za-z]{1,}[+]{0,2}">
  </div>
</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(selectedValue) {
  // 更新courseName输入框的值
  document.getElementById("courseName").value = selectedValue;   

  // 处理空选择，避免展示异常内容
  if (!selectedValue) {
    document.getElementById("courseInfo").innerHTML = "";
    return;
  }

  // 用选中值实例化Course对象并更新展示内容
  const currentCourse = new Course(selectedValue, instructor);
  document.getElementById("courseInfo").innerHTML = currentCourse.about();
}

修正说明 #

• 简化函数参数：将choiceMade的参数改为单个selectedValue，用同一值处理两个元素的内容更新。
• 增加空值判断：选中默认选项时清空courseInfo区域，提升用户体验。
• 规范变量声明：使用const声明currentCourse，避免全局变量污染。

内容的提问来源于stack exchange，提问作者Beatriz E