javascript - Get multiple element values to display in text box -
i'm having trouble getting value of each number , operator display inside text box (the calculator screen). think need iterate on val variable somehow i'm getting value of first button ("1"). i've tried using loop breaks code , have tried defining btns variable document.getelementsbyclassname[0], val iterate on values not getting further.
var btns = document.getelementbyid("keys"); var val = btns.dataset.value; var box = document.getelementbyid("display"); function addtoscreen(x) { box.value += x; } document.body.addeventlistener('click', function(e) { switch (e.target.dataset.value) { case '1': console.log('you hit button one'); addtoscreen(val); break; case '2': console.log('you hit button two'); addtoscreen(val); break; case '3': console.log('you hit button three'); addtoscreen(val); break; case '4': console.log('you hit button four'); addtoscreen(val); break; case '5': console.log('you hit button five'); addtoscreen(val); break; case '6': console.log('you hit button six'); addtoscreen(val); break; case '7': console.log('you hit button seven'); addtoscreen(val); break; case '8': console.log('you hit button eight'); addtoscreen(val); break; case '9': console.log('you hit button nine'); addtoscreen(val); break; case '0': addtoscreen(val); console.log('you hit button zero'); break; } });#calculator { width: 250px; } #display { width: 200px; height: 50px; border-radius: 5px; font-size: 45px; float: left; text-align: right; } .numbers, .operators { display: block; float: left; width: 50px; height: 50px; border-radius: 5px; background-color: orange; border: none; padding: 10px; margin: 10px; font-size: 30px; color: white; text-align: center; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>js bin</title> </head> <body> <div id="calculator"> <input type="text" id="display"></input> <button class="numbers" id="keys" data-value="1">1</button> <button class="numbers" id="keys" data-value="2">2</button> <button class="numbers" id="keys" data-value="3">3</button> <button class="numbers" id="keys" data-value="4">4</button> <button class="numbers" id="keys" data-value="5">5</button> <button class="numbers" id="keys" data-value="6">6</button> <button class="numbers" id="keys" data-value="7">7</button> <button class="numbers" id="keys" data-value="8">8</button> <button class="numbers" id="keys" data-value="9">9</button> <button class="numbers" id="keys" data-value="0">0</button> <button class="operators" id="plus" data-value="+">+</button> <button class="operators" id="keys" data-value="-">-</button> <button class="operators" id="keys" data-value="*">*</button> <button class="operators" id="keys" data-value="/">/</button> <button class="operators" id="keys" data-value="=">=</button> <button class="operators" id="keys" data-value="ce">ce</button> </div> </body> </html>
just asign val variable var val = e.target.dataset.value;
document.body.addeventlistener('click', function(e) { var val = e.target.dataset.value; switch (e.target.dataset.value) { case '1': console.log('you hit button one'); addtoscreen(val); break; case '2': console.log('you hit button two'); addtoscreen(val); break; case '3': console.log('you hit button three'); addtoscreen(val); break; case '4': console.log('you hit button four'); addtoscreen(val); break; case '5': console.log('you hit button five'); addtoscreen(val); break; case '6': console.log('you hit button six'); addtoscreen(val); break; case '7': console.log('you hit button seven'); addtoscreen(val); break; case '8': console.log('you hit button eight'); addtoscreen(val); break; case '9': console.log('you hit button nine'); addtoscreen(val); break; case '0': addtoscreen(val); console.log('you hit button zero'); break; } });
Comments
Post a Comment