Can't figure out the calculation result-CodePudding

How do I make JavaScript work with the math?

Here is the HTML code, but it needs JavaScript code that will make the result pop up or give the result.

How do you do that? Where would you start?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

<title> Calculation Solutions </title>

    <div class="row">
        <div class="col-md offset-md">
            <form>
                <h3 class="text-lef ">Calculate </h3>
                <div class="form-group">
                    <label for="resistance1">Enter value of resistance1 (R1) </label>
                    <input type="text" id="resistance2" class="form-control form-control-sm">
                </div>

                <div class="form-group">
                    <label for="resistance2">enter value for resistance2 (R2) </label>
                    <input type="text" id="resistance2" class="form-control form-control-md">
                </div>

                <div class="form-group">
                    <label for="Voltage"> Voltage (V) </label>
                    <input type="text" id="voltage" class="form-control form-control-md">
                </div>



                <div class="form-group">
                    <label for="Elecricityused">Electricy used </label>
                    <input type="button" value="Calculate" onclick="multiply()">

                </div>
            </form>


        </div>
    </div>

</main>

<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<!--- Custom JS -->
<script type="text/javascript" src="output.js"></script>

CodePudding user response：

First, add an ID to each input element in the HTML.

You can use const elem = document.getElementById('ID'); to get an element in Javascript. Then you can use elem.value to get the value of an input.

Do that for each input. Then, once you have all the values, do the calculations with them:

const result = num1 * num2 num3 (for example);.

Then, with the same method before, get the element where you want to show the value:

const resultText = document.getElementById('resultText');

and set it's value:

resultText.value = result;

If you put this in a function, you can have the function run onchange so the user doesn't have to click a button to calculate the result.

CodePudding user response：

First of all change the id in resistance 1 input field to 'resistance1'.

You can use DOM for calculating the result. First, Open output.js file. You can use document.getElementById().value method to get the data from the input field. So once you use this method you need to convert the text data to Number inorder to compute the results. You can convert it using Number() method. Therefore, you can use this way..

var res = Number(document.getElementById('resistance1').value) Number(document.getElementById('resistance2').value);

document.getElementById('voltage').value = res;