Подсчет и отображение комбинированных значений опций выбора

Question

Как бы вы проверили общую сумму значений опций выбора и отобразили их на другом входе с помощью javascript?

<form> 
    <select id="first"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 
    <select id="second"> 
     <option value="3">3</option> 
     <option value="4">4</option> 
    </select> 
    <input value="combined sum of select value for id='first', id='second'" type="number"> 
</form> 

Answer 1

Да, Google - это хорошая идея, чтобы найти то, что вы ищете.

Ищите основы Javascript и учебник jQuery. Я могу порекомендовать Codeschool, у них очень хорошие бесплатные онлайн-курсы по этим темам. (Требуется регистрация, но есть много бесплатных курсов.) Курсы интересны. Они структурированы в коротких видеороликах, а затем вы должны использовать это знание для прохождения упражнения. И если вы застряли в какой-то момент, всегда есть хорошие подсказки для решения экзамена.

То, что вы ищете, будет чем-то вроде сценария ниже.

Для выбора опции вы можете использовать $('#first').val() и для отслеживания изменений вы будете использовать обработчики событий для события изменения $('#first').on('change', function(){ ... }.

var adder = (function($){ 
 
    var first = 0; 
 
    var second = 0; 
 
    
 
    var init = function() { 
 
     first = getOption('#first'); 
 
     second = getOption('#second'); 
 
     var result = add(first,second); 
 
     //console.log(result); // for debugging in console of browser 
 
     update(result); 
 
     //console.log(first,second); 
 
    }; 
 
    
 
    var getOption = function(selector) { 
 
     return parseInt($(selector).val()); 
 
    }; 
 
    
 
    var add = function(a,b) { 
 
     return a+b; 
 
    }; 
 
    
 
    var update = function(value) { 
 
     $("#result").val(value); 
 
    }; 
 
    
 
    // event handlers 
 
    $('#first').on('change', function(){ 
 
     first = getOption('#first'); 
 
     update(add(first,second)); 
 
    }); 
 
    $('#second').on('change', function(){ 
 
     second = getOption('#second'); 
 
     update(add(first,second));  
 
    }); 
 
        
 
    return {init:init}; 
 
})(jQuery); 
 

 
$(function() { 
 
// Handler for .ready() called. 
 
    adder.init(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <select id="first"> 
 
     <option value="1">1</option> 
 
     <option value="2">2</option> 
 
    </select> 
 
    <select id="second"> 
 
     <option value="3">3</option> 
 
     <option value="4">4</option> 
 
    </select> 
 
    <input id="result" value="combined sum of select value for id='first', id='second'" type="number"/> 
 
</form>

Answer 2

Ниже код будет добавлять HTML элементы вместе с помощью JavaScript.

<input type="number" id="first" value="1"></input> 
    <input type="number" id="second" value="2"></input> 
    <button onclick="counter()">add</button> 
    <p id="display"></p> 
<script> 
function counter() { 
     var first = Number(document.getElementById("first").value); 
     var second = Number(document.getElementById("second").value); 
     var x = first + second; 
     document.getElementById("display").innerHTML = x; 
    } 
</script>