Change <p> and <h> element when selecting something from dropdown

by

0👍

✅

I think this code should work for you

var menu1 = document.getElementById('selectField1');
var menu2 = document.getElementById('selectField2');
var value1= document.getElementById('value1');
var value2= document.getElementById('value2');

menu1.setAttribute("onchange","setValue1()");
menu2.setAttribute("onchange","setValue2()");

function setValue1() {
    value1.innerHTML = menu1.value;
}
function setValue2() {
    value2.innerHTML = menu2.value;
}
<!-- HTML CODE -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <select id="selectField1" class="form-control-sm">
      <option value='hannover'>Hannover</option>
      <option value='munich'>München</option>
    </select>
    <select id="selectField2" class="form-group form-control-sm">
      <option value='einnahmen'>Einnahmen</option>
      <option value='registrierungen'>Registrierungen</option>
      <option value='kunden'>Kunden</option>
    </select>
    <div class="card-body ">
      <div id="gesamteinnahmen" class="boxy"><canvas id="gesamtChart"></canvas> </div>
      <div id="hannovereinnahmen" class="boxy"><canvas id="hannoverChart"></canvas></div>
    </div>
    <div class=" card-footer d-flex flex-wrap bg-c-blue order-card p-0">
      <div class="col-12 px-0">
        <div class="text-center p-4">
          <h4 id="value1">342</h4> // --------------------- SHOULD CHANGE 1
          <p class="mt-2" id="value2">Kunden</p> // --------SHOULD CHANGE 2
        </div>
      </div>
    </div>
</body>

Here I have updated your java script code and html code a little bit by adding id to <h4> and <p> tags as well as set attributes onchange to select.

Leave a comment