Получить несколько значений элементов для отображения в текстовом поле

У меня возникли проблемы с получением значения каждого числа и оператора для отображения внутри текстового поля (экрана калькулятора). Я думаю, что мне, вероятно, придется перебирать переменную val как-то, поскольку я получаю только значение первой кнопки («1»). Я попытался использовать цикл for, который просто разбивает мой код и попытался определить мою переменную btns с document.getElementsByClassName [0], так что val также будет перебирать все значения, но я не буду дальше.Получить несколько значений элементов для отображения в текстовом поле

Code

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>

источник

2016-02-08 CrystalH

просто присвойте переменную val из 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; 
    } 
});

источник

2016-02-08 22:16:14 mottaman85

Удивительный, спасибо. В конце концов, это было довольно просто :) – CrystalH

Я хотел бы сделать это с помощью Jquery:

$(document).on('click', '.numbers', function() { 
    var data_value = $(this).attr('data-value'); 

    // do what you want to do with it. 

});

Вы можете сделать то же самое для операторов.

источник

2016-02-08 22:13:20 Eric

Получить несколько значений элементов для отображения в текстовом поле

ответ

Смежные вопросы