使用 Javascript DOM 操作从下拉列表值更改 HTML 元素答案

【问题标题】：Changing HTML elements from Drop Down List value using Javascript DOM Manipulation使用 Javascript DOM 操作从下拉列表值更改 HTML 元素
【发布时间】：2020-03-30 16:08:09
【问题描述】：

首先，我对 Javascript 很陌生，所以如果这是一个简单的问题，我很抱歉。我的目标是在标签中显示我的 switch 语句的结果。现在，我只是想对它进行控制台记录，但我似乎无法让它工作。我的困难似乎在于将下拉列表中的值存储在我可以在我的 switch 语句中使用的变量中。这是我尝试过的：

var behaviour = document.getElementById("behaviour");
var kentsBehaviour = behaviour.value;

console.log(kentsBehaviour)

//var h3 = document.getElementsByTagName("h3");

function kentsReward (kentsBehaviour) {
  var prize;

  switch (kentsBehaviour) {
    case "Really good":
      prize = "You get foot rubs!";
      break;

    case "Good":
      prize = "You get an Oreo";
      break;

    case "Medium":
      prize = "You get bread";
      break;

    case "Not so good":
      prize = "You don't get anything";
      break;

    case "Greer":
      prize = "You get pinches";
      break;

    default:
      return "Tell me how you behaved today";
  }

  console.log( prize);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Kent's Rewards</title>
</head>
<body>
  <h1>Please select your behaviour for today:</h1>
  <select name="behaviour" id="behaviour" onChange="kentsReward()">
    <option value="default">Select your behaviour</option>
    <option value="Really good">Really good</option>
    <option value="Good">Good</option>
    <option value="Medium">Medium</option>
    <option value="Not so good">Not so good</option>
    <option value="Bad">Bad</option>
    <option value="Greer">Greer</option>
  </select>
  <h2>Your reward is:</h2>
  <h3></h3>
  <script type="text/javascript" src="script.js"></script>
</body>
</html>

【问题讨论】：

将您的HTML 更改为：onChange="kentsReward(this.value)"，现在不鼓励使用内联事件处理程序，您应该改用document.getElementById("behaviour").addEventListener("change", function(){ kentsReward(this.value); }); this 指的是@ 内的下拉列表987654327@ 然后你将它的value 传递给你的function。您可以删除前 3 行代码。
我不确定你所说的标签是什么意思。如果是
，只需在标签上放一个id，然后做getElementById("tagId").innerHtml = kentsReward(kentsBehaviour).
谢谢！我之前也尝试过 addEventListener 方法，我缺少的是 this.value 部分。至于
innerHTML，我把它放在哪里？

标签： javascript html select switch-statement

【解决方案1】：

由于您定义了带有参数的kentsReward(*parameter*)。在选择标记处调用时，您没有传递任何内容。尝试传递选择字段的当前值，例如 <select name="behaviour" id="behaviour" onChange="kentsReward(this.value)">

【讨论】：

谢谢。 this.value 功能是我所缺少的。这是我想出的解决方案：github.com/cipdv/kentrewards

innerHTML，我把它放在哪里？