0

I'm running into trouble trying to automatically change the text in two div tags on a page when selecting an item from Semantic UI's dropdown. I'm not sure where I'm going wrong. I made a javascript function that should be targeting the dropdown and retrieving values from there.

Here's the HTML code

<h2 class="sTypeText">Undefined</h2>
<span class="annotation">
  You've selected <b class="sTypeText">undefined</b> mode. You can continually edit this mode and its details.
</span>

<div id="dropdown" class="ui fluid selection dropdown" onchange="changeSelect">
  <div class="text">Choose Type</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item" data-value="A">Assessment</div>
    <div class="item" data-value="G">Group</div>
    <div class="item" data-value="S">Solo</div>
  </div>
</div>

Here's the Javascript code:

function changeSelect() {
    if (document.getElementById("dropdown").data-value == "A") {
        document.getElementByClassName("sTypeText").innerHTML = "Assessment";
    } else if (document.getElementById("dropdown").data-value == "G") {
        document.getElementByClassName("sTypeText").innerHTML = "Group"; 
    } else if (document.getElementById("dropdown").data-value == "S") {
        document.getElementByClassName("sTypeText").innerHTML = "Solo";
    }
}
P_Locked
  • 13
  • 6

1 Answers1

0

To get data attribute values, you can try using {DOMElement}.getAttribute('data-{name of attribute}') or by using the dataset property: {DOMElement}.dataset.{name of attribute}

Try changing your code to this to get the value from the data attribute "value":

function changeSelect() {
    if (document.getElementByClassName("dropdown").dataset.value == "A") {
        document.getElementByClassName("sTypeText").innerHTML = "Assessment";
    } else if (document.getElementById("dropdown").dataset.value == "G") {
        document.getElementByClassName("sTypeText").innerHTML = "Group"; 
    } else if (document.getElementById("dropdown").dataset.value == "S") {
        document.getElementByClassName("sTypeText").innerHTML = "Solo";
    }
}
Liew Xun
  • 99
  • 5
  • Have you tried `document.getElementByClassName("dropdown").getAttribute('data-value')` ? – Liew Xun Jun 26 '19 at 08:39
  • Yes, I've tried both. It does not dynamically change the HTML at all unfortunately – P_Locked Jun 26 '19 at 13:38
  • I think you need to bind the event handler to the onchange event generated by Semantic UI of the select element instead of the containing div, there should be a handler in the Semantic UI documentation. You can check this answer on SO: https://stackoverflow.com/questions/20817669/semantic-ui-dropdown-change-handler – Liew Xun Jun 27 '19 at 08:30