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
.