Cześć,
Jestem początkujący jeśli chodzi o kodowanie i stanąłęm w miejscu z dokończeniem zadania które sobie wymyśliłem.
Chodzi o to aby po kliknieciu w buttony, w divie wyświetlała się suma z ich wartości. Na ten moment wygląda to tak że po kliknięciu w divie pojawia się suma ciągu znaków, czyli kolejne liczby pojawiają się po sobie zamiast sumować. Kombinowałem z parseIntem sugerując się kodem z prostych kalkulatorów ale nie udało mi sie uzyskać rezultatu. Kod na ten moment wygląda tak
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
button {
display: block;
margin: 20px auto;
width: 200px;
height: 50px;
border: none;
border-radius: 10px;
}
button:hover {
border: 2px solid black;
}
#btn1 {
background: lightblue;
}
#btn2 {
background: lightgreen;
}
#btn3 {
background: lightcoral;
}
div {
margin: 30px auto;
padding: 0px;
display: block;
width: 300px;
height: 70px;
border: 2px solid black;
border-radius: 10px;
background: goldenrod;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<button id="btn1" class="b1"> 1 pkt </button>
<button id="btn2" class="b2"> 3 pkt</button>
<button id="btn3" class="b3"> 10 pkt</button>
<div>
</div>
</body>
<script>
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');
const btn1value = 1;
const btn2value = 3;
const btn3value = 10;
const div = document.querySelector("div");
const addNr = function(addNr) {
div.innerText += parseInt(addNr, 10) ;
}
btn1.addEventListener('click', function() {addNr(btn1value)});
btn2.addEventListener('click', function() {addNr(btn2value)});
btn3.addEventListener('click', function() {addNr(btn3value)});
</script>
</html>
Mogę liczyć na poradę?