указать значение типа номера переменной с кнопки JavaScript

Question

Я новичок в JavaScript и застрял в одной задаче. Мне нужно создать что-то вроде калькулятора, который занимается математикой. Звучит просто, но я застрял, и Google с YouTube не дает мне ответа на этот раз.

Должны быть кнопки, с помощью которых пользователь может выбрать, какой вариант он хочет. Затем есть поле, в котором пользователь может записать свою сумму и, в конце концов, ее все вместе. is = buttonValue + userInput + 1. Таким образом, в результате должно быть 3.

Я застрял там, что не могу указать числовое значение с помощью кнопки моей переменной. Я получил NaN или ничего не работает. NaN, потому что JavaScript не понимает, что значение кнопки - это число. Все остальное работает в моей формуле.

Html

<div class = "testCalculator">
        <h4>I want count button value + user <br> input and + 1 from javascript back -end</h4>
        <div class = "main-wrapper">
            <form>
                <div>  
                    <input type="radio" name="type" value=1 id= 1 onclick="func2();"/>button value 1<br/>
                    <input type="radio" name="type" value=2 id=2  onclick="func2();"/>button value 2 <br/>
                </div>
                <div>
                    <label for = "userInput">User input:</label>
                    <input type = "text" id = "userInput" placeholder="0.00">
                </div>

                <div>
                    <label for = "result">Final result </label>
                    <input type = "text" id = "result" placeholder="0.00" disabled = true>
                </div>
            </form>
        </div>
        <button type = "button" class = "main-btn" id = "calc-btn">Calculate</button>
        <button type = "button" class = "main-btn" id = "reset-btn">Reset</button>
    </div>

Мой

И мой JavaScript код: Код JavasSript

Я пытаюсь добавить пример кода, но возникла проблема, и он выглядит как обычный текст, поэтому лучше я создаю картинку.

Answer 1

Вы можете получить значение с помощью кнопки ввода, выполнив:

document.getElementById('1').value;

Однако это вернет строку, поэтому вам нужно будет обернуть результат в Number( ).

Есть много разных способов получить значение ie. сохранение ссылки на элемент для переменной отдельно), но основная идея - добавить .value.

Вот рабочий пример: JSFiddle