Как получить численное значение из input?

224

25 июня 2021, 16:00

Как с помощью JS получить цифры с каждого input и с селектора чтобы в JS например я имел 3 переменные содержат в себе 50 из input = text, 5 c radio, и 60 из селектора а потом я мог додать их, передать в сменную результата, и вывести? `

<h1>простенький калькулятор</h1> 
 
<input type="text" placeholder="Введите цифру"> 
 
+  
 
<input type="radio" id="five"  name="radio"> 
<label for="five"> 
5</label> 
 
<input type="radio" id="six"  name="radio"> 
<label for="six"> 
6</label> 
 
<input type="radio" id="seven" name="radio"> 
<label for="seven"> 
7</label>  
 
+ 
 
<select id="secector"> 
<option>50</option> 
<option>60</option> 
<option>70</option> 
<option>80</option> 
</select> 
 
==

https://codepen.io/dieie88/pen/abowZYV

Answer 1

На "чистом" js решение будет выглядеть как то так:

function getRadioValue(theRadioGroup) 
{ 
    var elements = document.getElementsByName(theRadioGroup); 
    for (var i = 0, l = elements.length; i < l; i++) 
    { 
        if (elements[i].checked) 
        { 
            return elements[i].value; 
        } 
    } 
} 
 
function calc() 
{ 
  result =  
    Number(document.getElementById('input').value) + 
    Number(document.getElementById('secector').value) + 
    Number(getRadioValue("radio_number")) ; 
  document.getElementById('result').value = result; 
}

<h1>простенький калькулятор</h1> 
 
<input type="text" placeholder="Введите цифру" id='input'> 
 
+  
 
<input type="radio" name="radio_number" name="radio" value='5'> 
<label for="five">5</label> 
 
<input type="radio" name="radio_number" name="radio" value='6'> 
<label for="six">6</label> 
 
<input type="radio" name="radio_number" name="radio" value='7'> 
<label for="seven">7</label>  
 
+ 
 
<select id="secector"> 
<option>50</option> 
<option>60</option> 
<option>70</option> 
<option>80</option> 
</select> 
 
<input type='button' value='=' onclick='calc()' > 
 
<input type="text" id='result' readonly>

Answer 2

Это достаточно легко сделать при помощи JQuery:

function calc() 
{ 
  result =  
    Number($('#input').val()) +  
    Number($('#secector').val()) +  
    Number($('input[name=radio_number]:checked').val()) ; 
  $('#result').val(result) 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<h1>простенький калькулятор</h1> 
 
<input type="text" placeholder="Введите цифру" id='input'> 
 
+  
 
<input type="radio" name="radio_number" name="radio" value='5'> 
<label for="five">5</label> 
 
<input type="radio" name="radio_number" name="radio" value='6'> 
<label for="six">6</label> 
 
<input type="radio" name="radio_number" name="radio" value='7'> 
<label for="seven">7</label>  
 
+ 
 
<select id="secector"> 
<option>50</option> 
<option>60</option> 
<option>70</option> 
<option>80</option> 
</select> 
 
<input type='button' value='=' onclick='calc()' > 
 
<input type="text" id='result' readonly>