CODEWITHSUNDEEP
javascripthtmlcss
Alexander Ross Thompson
Alexander Ross Thompson

Reputation: 35

Trying to update the DOM with dropdown select

I want the content displayed to be manipulated by selecting a dropdown option. Here's what I have so far. It doesn't work.

HTML - here's an example of my dropdown. 

<select id="dropdown">
  <option value="Week1" id="Week1drop">Week 1 - Greetings, Common Adjectives & Planets</option>
</select>

The div below will be hidden by default using {display: none} in CSS.

<div id="week1">
  <h1>Greetings, Common Adjectives & Planets</h1>
</div>

JavaScript - Below I've got an event listener to check for a change to the dropdown, which whill call the UpdateDom Function.

The function should be identifying that the user has selected Week1 on the dropdown and using Jquery .show() to make the Div visible.

document.getElementById("dropdown").addEventListener("change", updateDom);

function updateDOM () {
  if (document.getElementById('dropdown').value == "Week1") {
    $("#week1").show();
  }
}

I hope this makes sense, does anyone know where I'm going wrong?

Upvotes: 0

Views: 143

Answers (1)

mplungjan
mplungjan

Reputation: 177965

Apart from the typo you found yourself, if you have jQuery, USE it.
Also options do not have IDs

$("#dropdown").on("change", function() {
  $("#week1").toggle(this.value == "Week1"); // same as $(this).val()
}).change(); // initialise on load
#week1 {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown">
  <option value="">Please select</option>
  <option value="Week1">Week 1 - Greetings, Common Adjectives & Planets</option>
</select>

<div id="week1">
  <h1>Greetings, Common Adjectives & Planets</h1>
</div>

Upvotes: 1

Related Questions