Блог

Я закодировал функции для отображения данных из JSON и имею разные функции в выпадающем списке, чтобы пользователь мог выбрать то, что он хочет видеть.

    <div class="ex-basic-2">
        <label for="Charts">Sort your Data:</label>

<select name="Charts" id="chartData_Chage" onchange="changeData(this)">
  <option value="1">Top 5 Countries - Heights Cases</option>
  <option value="2">Top 5 Countries - Heights Deaths</option>
  <option value="3">Top 5 Countries - Most Recovered</option>
  <option value="4">All Countries - Cases</option>
</select>
        <div class="container">
            <canvas id="chart" style="height: 400px ; width: 800px;"></canvas>
        </div> <!-- end of container -->
    </div>
  

JS :

 var menu = document.getElementById("chartData_Chage")
menu.addEventListener("onchange", changeData)

function changeData(menu)
{
    if (menu.value == '1')
    {
        createBarChart()
    } 
    else if (menu.value == '2')
    {
        createBarChartMostDeaths()
    }
    else if (menu.value == '3')
    {
        createBarChartMostRecoverys()
    }

}
  

Когда я выбираю выпадающий список, методы работают правильно, но когда я покидаю его и навожу курсор на панель данных чата, данные изменяются (в зависимости от того, кто получает вызов)

Есть идеи, что не так??

Вам нужно удалить onchange="changeData(this)" из выбора

Также это change не onchange

Также вы можете использовать this :

 function changeData() { 
   if (this.value == '1') createBarChart(); 
   else if (this.value == '2') createBarChartMostDeaths()
...
  

 const createBarChart = () => {
  console.log("create")
}
const createBarChartMostDeaths = () => {
  console.log("create most deaths")
}
const createBarChartMostRecoverys = () => {
  console.log("create most recoveries")
}


function changeData() {
  if (this.value == '1') {
    createBarChart()
  } else if (this.value == '2') {
    createBarChartMostDeaths()
  } else if (this.value == '3') {
    createBarChartMostRecoverys()
  }
}
window.addEventListener("load",function() {
  const menu = document.getElementById("chartData_Change")
  menu.addEventListener("change", changeData); // "change" not "onchange"
  menu.value=1;
  createBarChart()
})  

 <div class="ex-basic-2">
  <label for="Charts">Sort your Data:</label>

  <select name="Charts" id="chartData_Change">
    <option value="1">Top 5 Countries - Heights Cases</option>
    <option value="2">Top 5 Countries - Heights Deaths</option>
    <option value="3">Top 5 Countries - Most Recovered</option>
    <option value="4">All Countries - Cases</option>
  </select>
  <div class="container">
    <canvas id="chart" style="height: 400px ; width: 800px;"></canvas>
  </div>
  <!-- end of container -->
</div>  

вам нужно только установить событие в вашем теге выбора, например

 <select id="sel" onchange='changeData(this)'>
  

вот полный пример : (https://jsfiddle.net/eaxv0o12 /)