How to check IF in Javascript with id html

Asked

Viewed 135 times

1

How do I compare the selected value in the html select to the javascript if to update my chart? Because the way it is, 2019 is subscribing to 2018

        <!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <canvas id="myChart"></canvas>
    <select name="chartValor" id="chartValor" onchange="updateChartType()">
        <option value="data">2018</option>
        <option value="data2">2019</option>

    </select>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script type="text/javascript">


if (document.getElementById('chartValor') != null) 

        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset

        // here we destroy/delete the old or previous chart and redraw it again

    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },





    // Configuration options go here
    options: {}

});

        if (document.getElementById('chartValor') != null) 

        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset

        // here we destroy/delete the old or previous chart and redraw it again

    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 15, 12, 120, 130, 145]
        }]
    },





    // Configuration options go here
    options: {}

});
</script>

Hug

javascript html

1 answer

0


Hello! Of course there are many ways to do it, but based on what you yourself provided my solution is the following:

  
function updateChartType(){

let selecionado = document.getElementById('chartValor').value;

document.getElementById('selecionado').innerHTML = selecionado;


if (document.getElementById('chartValor') != null) 

   if ( selecionado == 'data2' )
   {
     var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset

        // here we destroy/delete the old or previous chart and redraw it again

    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },





    // Configuration options go here
    options: {}

});
}
else
{
   
        if (document.getElementById('chartValor') != null) 

        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset

        // here we destroy/delete the old or previous chart and redraw it again

    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 15, 12, 120, 130, 145],
        }]
    },





    // Configuration options go here
    options: {}

});
}
      


}
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  
<head>
    <title></title>
</head>
<body>
    <canvas id="myChart"></canvas>
    <select name="chartValor" id="chartValor" onchange="updateChartType()">
        <option value="data">2018</option>
        <option value="data2">2019</option>

    </select>
     
Selecionado: <label id="selecionado">000</label>

Based on the information you passed there in your example, I think there are several things to improve, one of them is to put the data in a variable to not need to repeat as much code, but, as the logic is yours, I simply solved what you were asking there.

Suggestion of possible improvements:

  • Indentation of the code
  • No repetition of the same functions, aiming more readability
  • Creation of data variable
  • Improved selects ids to be clearer (e.g. year2018, year2019 and so on)

Anyway, I hope it helps in solving the initial problem.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.