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!!
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>
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()"/>
Related
I'm doing a point counter in general and I have no idea how to do it anymore, so I would like to add +1 to the sum on the "=" button and add it only once if someone could help me, I would be grateful
Code: https://pastebin.com/C26VFyev
var result = 0;
function suma() {
var cal1 = parseFloat(document.forms["form1"]["cal1"].value);
var cal2 = parseFloat(document.forms["form1"]["cal2"].value);
var sum = (cal1 + cal2 + 1);
document.forms["form1"]["sum"].value = sum
result = sum;
}
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<form name="form1">
Cal 1:
<input value="0" name="cal1" size="5"><br> Cal2:
<input value="0" name="cal2" size="5"><br>
<input type="button" value="Oblicz" name="add" onClick="suma();"><br> Suma:
<input type="text" name="sum" size="6"><br>
<input type="reset" value="Reset"><br>
</form>
</body>
</html>
Use a variable for what you add to the sum. Initialize it to 1 for the first time, than change it to 0 for future uses.
var result = 0;
var addition = 1;
function suma() {
var cal1 = parseFloat(document.forms["form1"]["cal1"].value);
var cal2 = parseFloat(document.forms["form1"]["cal2"].value);
var sum = (cal1 + cal2 + addition);
if (addition == 1) {
addition = 0;
}
document.forms["form1"]["sum"].value = sum
result = sum;
}
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<form name="form1">
Cal 1:
<input value="0" name="cal1" size="5"><br> Cal2:
<input value="0" name="cal2" size="5"><br>
<input type="button" value="Oblicz" name="add" onClick="suma();"><br> Suma:
<input type="text" name="sum" size="6"><br>
<input type="reset" value="Reset"><br>
</form>
</body>
</html>
This question already has answers here:
How to force JS to do math instead of putting two strings together [duplicate]
(11 answers)
Closed 3 years ago.
<title>Calculator</title>
<script type="text/javascript">
function Calculate(){
var myWorker = document.getElementById('myOperation');
var numberOne= document.getElementById('firstNumber').value;
var numberTwo= document.getElementById('secondNumber').value;
if (myWorker = "+") {
var provideAnswer = (numberOne + numberTwo);
var finalAnswer= document.getElementById('myAnswer');
finalAnswer.innerHTML = provideAnswer;
}
else {
alert('Please use Addition Symbol Only')
}
}
</script>
<h1>CALCULATOR</h1>
<br/>
<h2>Enter the first number</h2>
<input type="number" id="firstNumber" />
<br/>
<br/>
<h2>Enter the Operation</h2>
<input type="text" id="myOperation" />
<br/>
<br/>
<h2>Enter the second number</h2>
<input type="number" id="secondNumber" />
<input type="submit" value="Answer Is" onclick="Calculate()"/>
<br/>
<br/>
<h1 id="myAnswer">Your ANSWER Will be REPLACED by THIS TEXT</h1>
You need to parse the values to numbers first - quickest and simplest way is to use the unary + operator:
function Calculate() {
var myWorker = document.getElementById('myOperation');
var numberOne = +document.getElementById('firstNumber').value;
var numberTwo = +document.getElementById('secondNumber').value;
if (myWorker == "+") {
var provideAnswer = (numberOne + numberTwo);
var finalAnswer = document.getElementById('myAnswer');
finalAnswer.innerHTML = provideAnswer;
} else {
alert('Please use Addition Symbol Only')
}
}
<h1>CALCULATOR</h1>
<h2>Enter the first number</h2>
<input type="number" id="firstNumber" />
<h2>Enter the Operation</h2>
<input type="text" id="myOperation" />
<h2>Enter the second number</h2>
<input type="number" id="secondNumber" />
<input type="submit" value="Answer Is" onclick="Calculate()" />
<h1 id="myAnswer">Your ANSWER Will be REPLACED by THIS TEXT</h1>
(I modified your HTML markup slightly to remove newlines)
I am currently trying to make a calculator that takes a numerical input (n) and shows the Fibonacci number to the nth sequence. I am a beginner at Javascript and just can't seem to make my code work:
HTML:
<head>
<script src="calculator.js"></script>
</head>
<body>
<input type="number" name="Input" value="" id="userInput" / >
<input type="button" value="Go" onclick="calculate();" />
<input type="number" name="Answer" id="userAnswer" />
</body>
JavaScript:
var input = document.getElementById("userInput");
var output = document.getElementById("userAnswer");
var answer;
function calculate(){
n = input.value;
if (n < 2){
return 1;
} else {
answer = calculate(n - 2) + calculate(n - 1);
return answer;
}
output.value = answer;
}
Don't be complex!
function calculate(n){
if (n < 2){
return 1;
} else {
return calculate(n - 2) + calculate(n - 1);
}
}
<head>
<script src="calculator.js"></script>
</head>
<body>
<input type="number" name="Input" value="" id="userInput" / >
<input type="button" value="Go" onclick="document.getElementById('userAnswer').value=calculate(document.getElementById('userInput').value);" /><br>
<input type="number" name="Answer" id="userAnswer" />
</body>
I'm writing a JS code to calculate a final grade given some individual grades and output the result in the html page but when I trigger the event and function it outputs a wrong answer for a split second then immediately disappears along with the values entered into the text box.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Problem 2</title>
<script src="grades.js" type="text/javascript"></script>
</head>
<body>
<h1>Grade Calculator</h1>
<form id ="myForm">
<div id="assignments">
HW <input type="text" size="1"/> / <input type="text" size="1"/><br/>
HW <input type="text" size="1"/> / <input type="text" size="1"/><br/>
HW <input type="text" size="1"/> / <input type="text" size="1"/>
</div>
<div>
<input type="checkbox" /> Curve +5?
</div>
<div id="resultsarea">
<p>
<!--add buttons here -->
<button id="comp">Compute</button>
<button id="clr">Clear</button>
</p>
<!-- add results here -->
</div>
</form>
</body>
</html>
JS:
window.onload = pageLoad;
function pageLoad()
{
var cbutton = document.getElementById("comp");
cbutton.onclick = compute;
}
function compute()
{
var values = document.getElementsByTagName("input");
var marks = 0;
var total = 0;
for (var i=0; i < values.length; i++)
{
if(values[i].type == "text")
{
if (i%2 == 0)
marks += parseInt(values[i].value);
else
total += parseInt(values[i].value);
}
}
var result = Math.round(marks/total);
document.writeln(result);
}
I've been trying to figure out what is wrong with my code, I need to add the products (bananas, sodas, chips, candy) then multiply it with 10% tax given. Am I missing the variables for those products? I know something is missing but I don't know what to do!
<html>
<head>
<title>Total Calculator</title>
</head>
<body>
<p>
Bananas: <input type="text" id="bananasBox" value="" /> at $ 0.50 a piece<br/>
Sodas: <input type="text" id="sodasBox" value="" /> at $ 0.75 per can<br/>
Chips: <input type="text" id="chipsBox" value="" /> at $1.25 per bag<br/>
Candy: <input type="text" id="candyBox" value="" /> at $1.00 per pack<br/>
TAX is 10 %
</p>
<button id="Calculate" onclick= "Calculate()" value="Calculate">Calculate</button>
<script>
function Calculate(){
var total = 0;
var cost = document.getElementById("cost").value;
var tax = document.getElementById("tax").value;
total = cost * tax;
document.getElementById("total").value = total;
document.getElementById("outputDiv").innerHTML= "Your TOTAL is: " + total;
}
</script>
<hr/>
<div id="outputDiv">
</div>
</body>
</html>
I don't think you really put forth any effort, but here's a correct answer:
<html>
<head>
<title> Total Calculator </title>
</head>
<body>
<p>
Bananas: <input type="text" id="bananasBox" value=""> at $ 0.50 a piece<br>
Sodas : <input type="text" id="sodasBox" value=""> at $ 0.75 per can<br>
Chips : <input type="text" id="chipsBox" value=""> at $1.25 per bag<br>
Candy : <input type="text" id="candyBox" value=""> at $1.00 per pack<br>
TAX is 10 %
</p>
<input type="button" value="Calculate" id='Calculate' onclick= "Calculate()">
<script type="text/javascript">
function Calculate() {
var total = 0;
var bananas = Number(document.getElementById("bananasBox").value) * .5;
var sodas = Number(document.getElementById("sodasBox").value) * .75;
var chips = Number(document.getElementById("chipsBox").value) * 1.25;
var candy = Number(document.getElementById("candyBox").value) * 1;
var tax = 0.10;
total = (bananas+sodas+chips+candy)*(1+tax);
document.getElementById('outputDiv').innerHTML= 'Your TOTAL is: $' + Number(total).toFixed(2);
}
</script>
<hr>
<div id="outputDiv">
</div>
</body>
</html>
If you want me to explain it I will, but if you don't really have any intention in learning: it wouldn't be worth wasting my time.