Javascript Code to be embedded in HTML

Question

I have a JS code to calculate the multiple of a number. I want to incorporate the same in my HTML file. So when I click the "Submit" button, it gives me the answer. Below is my code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta author="Shruti Paliwal">
<title>Project Euler Solutions</title>
<script language="javascript" type="text/javascript">
    function multiples()
    {
        var i;
        sum=0;
        for(i=1;i<1000;i++)
        {
            if(i%3 === 0 || i%5 === 0)
                {
                    sum+=i;
                }

        }

    }
    document.getElementById('sum').value = sum;
</script>
</head>
<body>
<h3>
<div id="header">
Project Euler
<sub>.net</sub>
</h3>
</div>
<br />
<br />
<p class="problem1" id="problem">
<b>
Multiples of 3 and 5
</b>
<div class="boundary" id="boundary">
<div class="content">
If we list all the natural numbers below 10 that are multiples of 3 or   5, we get 3, 5, 6 and 9. The sum of these multiples is 23.
<br />
Find the sum of all the multiples of 3 or 5 below 1000.
<br />
<br />
<form>
<input type="text" name="value">
<input type="button" onclick="sum()" value="Submit" />

</form>
</div>
</p>
</div>
</style>
</body>
</html>

Need help to display the output of this code on my webpage. The logic to calculate multiples is working fine on a JS console. However, not getting how to incorporate the 2!!

You are using: 'document.getElementById('sum').value = sum;' Where is that ID on your html page? You also calling the function sum(). And call your working function on html multiples(), where is the correct code? — Rick Bronger
– Rick Bronger, Commented Aug 3, 2016 at 9:25

Sandip - Frontend Developer · Accepted Answer · 2016-08-03 09:54:30Z

1

Change your code to:

<p class="problem1" id="problem">
    <b>
        Multiples of 3 and 5
    </b>
    <div class="boundary" id="boundary">
        <div class="content">
            If we list all the natural numbers below 10 that are multiples of 3 or   5, we get 3, 5, 6 and 9. The sum of these multiples is 23.
            <br />
            Find the sum of all the multiples of 3 or 5 below 1000.
            <br />
            <br />
            <form>
                <p>Enter number 1:</p><input type="text" id="txtNumber1">
                <br />
                <p>Enter number 2:</p><input type="text" id="txtNumber2">
                <br />
                <br />
                <input type="button" onclick="multiples()" value="Submit" />

                <input type="text" name="value" id="sum">


            </form>
        </div>

    </div>
<script language="javascript" type="text/javascript">
    function multiples() {
        ////Jquery
        //var number1 = $("#txtNumber1").val();
        //var number2 = $("#txtNumber2").val();

        //Javascript
        var number1 = document.getElementById('txtNumber1').value;
        var number2 = document.getElementById('txtNumber2').value;

        if (number1.trim() == '' || number2.trim() == '')
        {
            alert('please enter number1 and number2');
            return false;
        }

        var i;
        sum = 0;
        for (i = 1; i < 1000; i++) {
            if (i % number1 === 0 || i % number2 === 0) {
                sum += i;
            }

        }
        document.getElementById('sum').value = sum;
        return false;
    }
</script>

edited Aug 3, 2016 at 9:54

answered Aug 3, 2016 at 9:26

Sandip - Frontend Developer

14.7k5 gold badges38 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Rick Bronger Over a year ago

The only problem in this solution is that there is no ID sum on the HTML side.

Shruti Paliwal Over a year ago

This function returns 233168 everytime for any number. How can I make this work with any random natural number??

Sandip - Frontend Developer Over a year ago

You have to pass those two numbers as function parameter. function multiples(a,b)

Shruti Paliwal Over a year ago

If you could be a little more specific, I would be highly obliged.. I have added another box to display the result. Now, I want that the code should run for any given number.. be it 10, 20 or 1000

Sandip - Frontend Developer Over a year ago

give me some time, will add the html

|

DreamTeK · Accepted Answer · 2016-08-03 09:30:44Z

0

Javascript 101

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>

 <button onclick="myFunction()">Click me</button>

OR

function calculate() {
    var myBox1 = document.getElementById('box1').value; 
    var myBox2 = document.getElementById('box2').value;
    var result = document.getElementById('result'); 
    var myResult = myBox1 * myBox2;
    result.innerHTML = myResult;

}

<input id="box1" type="text" />
<input id="box2" type="text" />
<div id="result"></div>
<input type="submit" onclick="calculate()"/>

edited Aug 3, 2016 at 9:30

answered Aug 3, 2016 at 9:18

DreamTeK

34.6k30 gold badges127 silver badges180 bronze badges

Collectives™ on Stack Overflow

Javascript Code to be embedded in HTML

2 Answers 2

7 Comments

Javascript 101

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Javascript 101

Comments

Your Answer

Sign up or log in

Post as a guest

Related