Как изменить текст на странице в зависимости от выбранного элемента из выпадающего списка семантического интерфейса? - PullRequest
Новая
       14

Как изменить текст на странице в зависимости от выбранного элемента из выпадающего списка семантического интерфейса?

0 голосов
/ 26 июня 2019

У меня возникают проблемы при попытке автоматически изменить текст в двух тегах div на странице при выборе элемента из выпадающего меню Semantic UI. Я не уверен, где я иду не так. Я сделал функцию javascript, которая должна быть нацелена на выпадающий список и получать значения оттуда.

Вот код HTML 

<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>

Вот код Javascript: 

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";
    }
}

1 Ответ

0 голосов
/ 26 июня 2019

Чтобы получить значения атрибутов данных, вы можете попробовать использовать {DOMElement}.getAttribute('data-{name of attribute}') или свойство dataset: {DOMElement}.dataset.{name of 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";
    }
}
...