javascript - 如何根据选择选项更改 <p> 的内容

Question

我已经阅读了很多有关此的主题，但没有任何效果。我正在尝试做一些非常简单的事情，但似乎无法让它发挥作用。我试图让下拉框的元素更改段落文本中的值。这是我正在运行的脚本:

<script>
    window.onload = function fn(){
    var x = document.getElementById("DescChange");
    var y = document.getElementById("CostChange");
    var a = document.getElementById("dropdown");

    a.addEventListener('change', function(){
        if (a.value == 0){
            x.innerHTML = "Description: Basic care for car including wax and buffer";
            y.innerHTML = "Total cost:" + 59.99;
        }
        else if (a.value == 1){
            x.innerHTML = "Mid-level care for car including Basic services and repainting";
            y.innerHTML = "Total cost:" + 119.99;
        }
        else if (a.value == 2){
            x.innerHTML = "Advanced care for car including Basic, Intermediate and interior + window repair";
            y.innerHTML = "Total cost:" + 299.99;
        }
        else{
            x.innerHTML = "";
            y.innerHTML = "";
        }

      });

    }
</script>

这是我的 div 和选择选项:

<div>
    <h2><u>Products and Services</u></h2>
    <h4>
        <select id="dropdown">
    <option value="empty"></option>
    <option value="0">Basic</option> 
    <option value="1">Intermediate</option> 
    <option value="2">Advanced</option> 
        </select>

    <p id="DescChange">1</p>
    <p id="CostChange">2</p>
    <p></p>
    <p></p>
    </h4>
</div>

我的浏览器控制台中没有收到任何错误。我觉得我错过了一些非常简单的事情，但我无法弄清楚。我感谢任何帮助!

编辑1:我根据下面的答案更新了我的脚本。目前 1 <p>正在更新:高级标签....试图找到差异。

编辑2:它的工作原理。我搞砸了 if/else if 语句。

Answer 1

对我来说snwflk代码很好
我只想使用更简单的代码，
具有更好的变量名称， 不必要时不使用innerHTML => 使用textContent

window.onload = function() {
  let
    DescChange = document.getElementById("Desc-Change"),
    CostChange = document.getElementById("Cost-Change"),
    mySelect   = document.getElementById("dropdown")
  ;


  mySelect.onchange = function(){

    switch (mySelect.value)  {
      case '0':
        DescChange.textContent = "Description: Basic care for car including wax and buffer";
        CostChange.textContent = "Total cost: " + 59.99;
      break;
      case '1':
        DescChange.textContent = "Mid-level care for car including Basic services and repainting"
        CostChange.textContent = "Total cost: " + 119.99;
      break;
      case '2':
        DescChange.textContent = "Advanced care for car including Basic, Intermediate and interior + window repair";
        CostChange.textContent = "Total cost: " + 299.99;
      break;
      default:
        DescChange.textContent = "";
        CostChange.textContent = "";
    }
  }
}

<div>
  <h2><u>Products and Services</u></h2>
  <h4>
    <select id="dropdown">
      <option value="empty" disabled selected> please select </option>
      <option value="0">Basic</option>
      <option value="1">Intermediate</option>
      <option value="2">Advanced</option>
    </select>

    <p id="Desc-Change">1</p>
    <p id="Cost-Change">2</p>
    <p></p>
    <p></p>
  </h4>
</div>