Changing HTML elements from Drop Down List value using Javascript DOM Manipulation

Question

Firstly, I'm very new to Javascript, so I'm sorry if this is an easy question. My goal is to display the result of my switch statement in the tag. For now, I'm just trying to console.log it, but I can't seem to get it to work. My difficulty seems to be in storing the value from the drop down list in a variable that I can use in my switch statement. Here is what I've tried:

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>

Change your HTML to this: onChange="kentsReward(this.value)", inline event handlers are discouraged now a days, you should switch to using document.getElementById("behaviour").addEventListener("change", function(){ kentsReward(this.value); }); this refers to the drop down list inside of the event handler function so you then pass it's value to your function. You can remove the first 3 lines of code. — Ryan Wilson
– Ryan Wilson, Commented Dec 5, 2019 at 17:09
I'm not sure what you mean by tag. If is the <h3></h3>, just put an id on the tag, and then do getElementById("tagId").innerHtml = kentsReward(kentsBehaviour). — Eduardo Pascual Aseff
– Eduardo Pascual Aseff, Commented Dec 5, 2019 at 17:09
Thanks! I tried the addEventListener approach before as well, what I was missing was the this.value part. As for the <h3> innerHTML, where do I put this? — Cip
– Cip, Commented Dec 5, 2019 at 18:04

Abhishek Singh · Accepted Answer · 2019-12-05 17:40:24Z

1

Since you defined kentsReward(*parameter*) that takes a parameter. You not passing anything when it called at select tag.Try to pass current value of select field like <select name="behaviour" id="behaviour" onChange="kentsReward(this.value)">

answered Dec 5, 2019 at 17:40

Abhishek Singh

6078 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cip Over a year ago

Thank you. The this.value feature is what I was missing. Here's the solution I came up with: github.com/cipdv/kentrewards

Collectives™ on Stack Overflow

Changing HTML elements from Drop Down List value using Javascript DOM Manipulation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related