This should be a no brainer but i have no experience in Javascript and i can't see why this should not work.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Undantag</title>
<p> STD: </p>
<input type="number" name="STD">
<p> STA: </p>
<input type="number" name="STA">
<p> ATD: </p>
<input type="number" name="ATD">
<p> ATA: </p>
<input type="number" name="ATA">
<button onclick="useUndantag()">Click me</button>
</head>
<body>
<script>
function useUndantag() {
var a = document.getElementsByName("STD");
var b = document.getElementsByName("ATD");
var c = document.getElementsByName("STA");
var d = document.getElementsByName("ATA");
if (a-b >1) {
alert("No undantag");
}
else if (d-c >2) {
alert ("No undantag");
else () {
alert ("NO EU FOR YOU!")
}
}
}
</script>
</body>
</html>
The problem is that i get no alert at all and i can't seem to figure out why. If anyone has any tips if would be very glad for any help i can get.
First of all, getElementsByName returns a collection of HTML elements. Use [0] to access the first element. Next, you must use parseFloat or parseInt to parse the inputs as integers/floats. Also, HTML code goes in the body tag unless you have scripts, links, meta, title, and other tags. Finally, you have an syntax error:
else () { }
Should not have parentheses. You're also missing a brace after the else if, remove a closing brace after the else. Here's a fixed snippet:
function useUndantag() {
var a = document.getElementsByName("STD")[0].value;
var b = document.getElementsByName("ATD")[0].value;
var c = document.getElementsByName("STA")[0].value;
var d = document.getElementsByName("ATA")[0].value;
if (parseInt(a) - parseInt(b) > 1) { //notice the use of parseInt, you can use parseFloat to deal with decimals
alert("No undantag");
} else if(parseInt(d) - parseInt(c) > 2) {
alert("No undantag");
} else { //Notice no parentheses and some more braces
alert("NO EU FOR YOU!")
}
}
<p> STD: </p> <!-- HTML is in body tag !-->
<input type="number" name="STD">
<p> STA: </p>
<input type="number" name="STA">
<p> ATD: </p>
<input type="number" name="ATD">
<p> ATA: </p>
<input type="number" name="ATA">
<button onclick="useUndantag()">Click me</button>
Also, make sure you use .value to get the value.
Your syntax is incorrect.
Also, if you are comparing the values of the inputs then you need to get the value attribute of the input.
Also, document.getElementsByName returns an array of elements so you need to select the first element.
Here is a working example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Undantag</title>
</head>
<body>
<p> STD: </p>
<input type="number" name="STD">
<p> STA: </p>
<input type="number" name="STA">
<p> ATD: </p>
<input type="number" name="ATD">
<p> ATA: </p>
<input type="number" name="ATA">
<button onclick="useUndantag()">Click me</button>
<script>
function useUndantag() {
var a = document.getElementsByName("STD")[0].value;
var b = document.getElementsByName("ATD")[0].value;
var c = document.getElementsByName("STA")[0].value;
var d = document.getElementsByName("ATA")[0].value;
if (a - b > 1) {
alert("No undantag");
} else if (d - c > 2) {
alert("No undantag");
} else {
alert("NO EU FOR YOU!")
}
}
</script>
</body>
</html>
You have enough errors
the function
document.getElemenstByName
return an array!
var a = document.getElementsByName("STD")[0].value;
var b = document.getElementsByName("ATD")[0].value;
var c = document.getElementsByName("STA")[0].value;
var d = document.getElementsByName("ATA")[0].value;
and you have sentences misdeclared
here code:
https://jsfiddle.net/evpog628/1/
1) It's better to use getElementById(), it's faster and you select only one element ("id" must be unique in HTML document).
2) Be sure to use correct HTML structure
<!doctype html>
<html>
<head>
<meta>
<title></title>
</head>
<body>
<input>
<script>
</script>
</body>
</html>
3) You need to be sure you get integer or float values from HTML fields to make your code work correctly. parseInt() or pareseFloat().
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Undantag</title>
</head>
<body>
<p> STD: </p><input type="number" id="STD">
<p> STA: </p><input type="number" id="STA">
<p> ATD: </p><input type="number" id="ATD">
<p> ATA: </p><input type="number" id="ATA">
<button onclick="useUndantag();">Click me</button>
<script>
function useUndantag() {
var a = document.getElementById("STD");
var b = document.getElementById("ATD");
var c = document.getElementById("STA");
var d = document.getElementById("ATA");
if (parseInt(a.value)-parseInt(b.value)>1) {
alert("No undantag");
}
else if (parseInt(d.value)-parseInt(c.value) >2)
{
alert ("No undantag");
}
else
{
alert ("NO EU FOR YOU!");
}
}
</script>
</body>
</html>
Related
I write a js code to determine which number is bigger but the result is not perfect! when I input two number with same digit numbers, the result is correct. For example when I input "2" and "3" the result is "3" but when I input "2" in first field and "55" in the second field, the result is "2". Thank you in advance.
sorry for my weak English.
function biggerOne() {
var x = document.getElementById("firstNumber").value;
var y = document.getElementById("secondNumber").value;
if (x>y){ document.getElementById("Result").innerHTML=x;
} else {
document.getElementById("Result").innerHTML=y;
}
}
<!DOCTYPE html>
<head>
<script src="show bigger.js"></script>
</head>
<body>
<p>insert first number</p>
<input type="number" id="firstNumber" ر>
<p> insert second number</p>
<input type="number" id="secondNumber">
<button onclick="biggerOne()"> result </button>
<!---it is so important to insert value in the below code line-->
<p id="Result" value=""></p>
</body>
Document.getElementById() returns "String" type value and comparison between two string will act differently. Better convert those string types to integer.
var x = document.getElementById("firstNumber").value;
var y = document.getElementById("secondNumber").value;
if (parseInt(x) > parseInt(y))
{
document.getElementById("Result").innerHTML=x;
}
else
{
document.getElementById("Result").innerHTML=y;
}
change type of x and y to number and then try to compare.for convert you can use Number or parsint
if (Number(x) > Number(Y))
//some code
else
//some code
<!DOCTYPE html>
<head>
<script src="show bigger.js"></script>
</head>
<body>
<p>insert first number</p>
<input type="number" id="firstNumber" ر>
<p> insert second number</p>
<input type="number" id="secondNumber">
<button onclick="biggerOne()"> result </button>
<!---it is so important to insert value in the below code line-->
<p id="Result" value=""></p>
<script>
function biggerOne() {
var x = document.getElementById("firstNumber").value;
var y = document.getElementById("secondNumber").value;
if (parseInt(x) > parseInt(y)) {
document.getElementById("Result").innerHTML = x;
} else {
document.getElementById("Result").innerHTML = y;
}
}
</script>
</body>
Use the parseInt method.
I just started to learn Javascript. I have two questions regarding TextCounter & Trigger innerHTML.
My code below, how to separately trigger innerHTML for two inputs?
Why the alert info which is "over!!" still shows while deleting the number of words in the textarea?
Can someone please help? Much appreciated!
HTML
<html>
<head>
</head>
<body>
<form>
<textarea name="line01" rows="3" style="width:340px;"
onKeyUp="textCounter(this.form.01,this.form.countDisplay01,10);"
onKeyDown="textCounter(this.form.01,this.form.countDisplay01,10);">
</textarea>
<br>
<input readonly type="text" name="countDisplay01" width: 25px"
value="10">characters remaining
<p id="go1"></p>
</form>
<form>
<textarea name="line02" rows="3" style="width:340px;"
onKeyUp="textCounter(this.form.02,this.form.countDisplay02,8);"
onKeyDown="textCounter(this.form.02,this.form.countDisplay02,8);">
</textarea>
<br>
<input readonly type="text" name="countDisplay02" width: 25px"
value="8">characters remaining
<p id="go2"></p>
</form>
</body>
</html>
Javascript
<script>
function textCounter(textField, showCountField, maxAmount) {
if (textField.value.length <= maxAmount) {
showCountField.value = maxAmount - textField.value.length;
} else {
document.getElementById("go1").innerHTML = "<span
style='color:red'>Over!!</span>";
document.getElementById("go2").innerHTML = "<span
style='color:red'>Over!!</span>";
textField.value = textField.value.substring(0,maxAmount);
}
</script>
Try with the following code
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text Counter</title>
</head>
<body>
<form>
<textarea name="01" rows="3" style="width:340px;"
onKeyUp="textCounter(this.form['01'],this.form.countDisplay01,10,1);"
onKeyDown="textCounter(this.form['01'],this.form.countDisplay01,10,1);">
</textarea>
<br>
<input readonly type="text" name="countDisplay01" style="width: 25px;" value="28"> characters remaining
<p id="go1"></p>
</form>
<form>
<textarea name="02" rows="3" style="width:340px;"
onKeyUp="textCounter(this.form['02'],this.form.countDisplay02,8,2);"
onKeyDown="textCounter(this.form['02'],this.form.countDisplay02,8,2);">
</textarea>
<br>
<input readonly type="text" name="countDisplay02" style="width: 25px" value="15">characters remaining
<p id="go2"></p>
</form>
</body>
</html>
SCRIPT
<script>
function textCounter(textField, showCountField, maxAmount,id) {
if (textField.value.length <= maxAmount) {
showCountField.value = maxAmount - textField.value.length;
document.getElementById('go'+id).innerHTML = '';
} else {
document.getElementById('go'+id).innerHTML = '<span style="color:red">Over!!</span>';
textField.value = textField.value.substring(0,maxAmount);
}
}
</script>
As you have used a name that starts with number, it's not a valid variable. You should access it through dictionary lookup:
textCounter(this.form['01'],this.form.countDisplay01,10);
For the alert text, you should reset the innerHTML in the first if clause:
if (textField.value.length <= maxAmount) {
showCountField.value = maxAmount - textField.value.length;
document.getElementById("go1").innerHTML = "";
document.getElementById("go2").innerHTML = "";
} else {
document.getElementById("go1").innerHTML = "<span style='color:red'>Over!!</span>";
document.getElementById("go2").innerHTML = "<span style='color:red'>Over!!</span>";
textField.value = textField.value.substring(0,maxAmount);
}
This will remove the alert text, on the next keypress. If you want to remove the text immediately, you have two options:
Forget about showing an error.
Show the error for about a fraction of second and then remove it. Using something like a setTimeout. But you should remember, the window won't redraw before returning from your function. So, setting the alert text first, and then removing it at the end of your function, will be the same as doing option 1.
I have two buttons in my form for calling two JavaScript functions. The first button works good in its onclick event calling the payroll() function successfully but the second button is of type submit and it never calls the send() function on form submission. I don't know why this issue occurs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html >
<head>
<title>hr page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"
src="/static/js/sijax/sijax.js"></script>
<script type="text/javascript">
{{ g.sijax.get_js()|safe }}</script>
<link rel="stylesheet" href="{{url_for('static', filename='styles/signupcss.css')}}">
<script type="text/javascript" >
function payroll() {
var basic=document.forms["salary"]["bsalary"].value;
var empid=document.forms["salary"]["empid"].value;
var ta,hra,da,pf,netsalary,grosssalary;
if (empid == ""||basic == "") {
alert("Employee ID and Salary details must be filled out");
return false;
}
if(isNaN(basic))
{alert("Salary must be in Numbers");
return false;
}
hra=basic*40/100;
da=basic*15/100;
pf=basic*12/100;
basic=parseInt(basic);
hra=parseInt(hra);
da=parseInt(da);
grosssalary=basic + hra + da;
ta=basic*6.2/100;
netsalary=grosssalary-ta;
document.getElementById("hra").innerHTML=hra;
document.getElementById("ta").innerHTML=ta;
document.getElementById("da").innerHTML=da;
document.getElementById("netsalary").innerHTML=netsalary;
document.getElementById("pf").innerHTML=pf;
document.getElementById("grosssalary").innerHTML=grosssalary;
window.alert("HI"+grosssalary);
return true;
}
function send()
{
var id = document.forms['salary']['empid'].value;
var basic = document.forms['salary']['bsalary'].value;
var hra = document.forms['salary']['hra'].value;
var da = document.forms['salary']['da'].value;
var ta = document.forms['salary']['ta'].value;
var pf = document.forms['salary']['pf'].value;
var gross_sal = document.forms['salary']['grosssalary'].value;
window.alert("HI"+gross_sal);
var net_sal = document.forms['salary']['netsalary'].value;
Sijax.request('send',[id, basic, hra, ta, da, pf, gross_sal, net_sal]);
}
</script>
</head>
<body style="font-family:Lato">
<div style="padding-left:5%;padding-top:0.2%;height:1%;width:100%;background-color:#11557c">
<h2>Welcome to HR Department</h2><br>
</div>
<div style="margin-left:15%" >
<h2>Name</h2>
<form id="salary" name="salary" style="margin-top: 2%" method="post" onsubmit="return send()" >
<label id = "empid">Employee ID</label><br>
<input type = "text" name = "empid" placeholder = "Employee ID" /><br><br>
<label id = "bsalary">Basic Salary</label><br>
<input type = "text" name = "bsalary" placeholder = "Basic salary" /><br><br>
<input type="button" value="Calculate" onclick="return payroll()"><br><br>
<label for ="hra">House Rent Allowance(HRA)</label>
<p id="hra" name="hra"></p><br>
<label for ="ta">Travel Allowance(TA)</label>
<p id="ta" name="ta"></p><br>
<label for ="da"> Dearness Allowance(DA)</label>
<p id="da" name="da"></p><br>
<label for ="netsalary">Net Salary</label>
<p id="netsalary" name="netsalary"></p><br>
<label for ="pf">Provident Fund(PF)</label>
<p id="pf" name ="pf"></p><br>
<label for ="grosssalary">Gross Salary</label>
<p id="grosssalary" name="grosssalary"></p><br><br>
<input type="submit" value="Upload Salary">
</form>
</div>
</body>
</html>
You can't act with <p> elements like as a form-elements. You may create a respective <input type="hidden"> elements and fill them in payroll(), or get values by .innerHtml on paragraphs.
P.S. You have actually a TypeError exception, calling undeclared form elements like document.forms['salary']['grosssalary'] and so on.
okay, quick fix, since you are using python flask library Sijax for ajax and therefore jQuery, you can alter your javascript send function like this:
function send(e){
e.preventDefault(); //it is as good as returning
//false from the function in all cases
var id = document.forms['salary']['empid'].value;
...
}
and change your onsubmit handler declaration like this:
<form id="salary" name="salary" style="margin-top: 2%" method="post"
onsubmit="return send(event)" >
please note that when you stop the event chain propagation, you will have to do a manual submission of the form.
So, you can modify your send function to do .preventDefault based on your custom criterias, otherwise, let the form submit
Your code actually works, if you're running this code as a snippet here in stack overflow, Form submission is actually blocked by default. Try running your code in codepen. I tried it and it's actually working.
http://codepen.io/jhonix22/pen/VPZagb
Check this out. It is nowhere close to a perfect solution but I think it helps. You can not access the paragraphs as if you would the form input elements. Im not entirely sure what Sijax thing is. I believe it is just a normal AJAX HTTP thing with some sort of CSRF security filters.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>hr page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript"
src="/static/js/sijax/sijax.js"></script>
<script type="text/javascript">
{
{
g.sijax.get_js() | safe
}
}</script>
<link rel="stylesheet" href="{{url_for('static', filename='styles/signupcss.css')}}">
<script type="text/javascript">
function payroll() {
var basic = document.forms["salary"]["bsalary"].value;
var empid = document.forms["salary"]["empid"].value;
var ta, hra, da, pf, netsalary, grosssalary;
if (empid == "" || basic == "") {
alert("Employee ID and Salary details must be filled out");
return false;
}
if (isNaN(basic)) {
alert("Salary must be in Numbers");
return false;
}
hra = basic * 40 / 100;
da = basic * 15 / 100;
pf = basic * 12 / 100;
basic = parseInt(basic);
hra = parseInt(hra);
da = parseInt(da);
grosssalary = basic + hra + da;
ta = basic * 6.2 / 100;
netsalary = grosssalary - ta;
document.getElementById("hra").innerHTML = hra;
document.getElementById("ta").innerHTML = ta;
document.getElementById("da").innerHTML = da;
document.getElementById("netsalary").innerHTML = netsalary;
document.getElementById("pf").innerHTML = pf;
document.getElementById("grosssalary").innerHTML = grosssalary;
window.alert("HI" + grosssalary);
return true;
}
function send() {
var id = document.forms['salary']['empid'].value;
var basic = document.forms['salary']['bsalary'].value;
var hra = document.getElementById('hra').innerHTML;
var da = document.getElementById('da').innerHTML;
var ta = document.getElementById('ta').innerHTML;
var pf = document.getElementById('pf').innerHTML;
var gross_sal = document.getElementById('grosssalary').innerHTML;
window.alert("HI" + gross_sal);
var net_sal = document.getElementById('netsalary').innerHTML;
// I think you are missing something here.
Sijax.request('send', [id, basic, hra, ta, da, pf, gross_sal, net_sal]);
}
</script>
</head>
<body style="font-family:Lato">
<div style="padding-left:5%;padding-top:0.2%;height:1%;width:100%;background-color:#11557c">
<h2>Welcome to HR Department</h2><br>
</div>
<div style="margin-left:15%">
<h2>Name</h2>
<form id="salary" name="salary" style="margin-top: 2%" method="post" onsubmit="return false">
<label id="empid">Employee ID</label><br>
<input type="text" name="empid" placeholder="Employee ID"/><br><br>
<label id="bsalary">Basic Salary</label><br>
<input type="text" name="bsalary" placeholder="Basic salary"/><br><br>
<input type="button" value="Calculate" onclick="return payroll()"><br><br>
<label for="hra">House Rent Allowance(HRA)</label><br>
<p id="hra" readonly name="hra"></p>
<label for="ta">Travel Allowance(TA)</label><br>
<p id="ta" readonly name="ta"></p>
<label for="da"> Dearness Allowance(DA)</label><br>
<p id="da" readonly name="da"></p>
<label for="netsalary">Net Salary</label><br>
<p id="netsalary" readonly name="netsalary"></p>
<label for="pf">Provident Fund(PF)</label><br>
<p id="pf" readonly name="pf"></p>
<label for="grosssalary">Gross Salary</label><br>
<p id="grosssalary" readonly name="grosssalary"></p><br>
<input type="button" onclick="send()" value="Upload Salary">
</form>
</div>
</body>
</html>
I am trying to make a simple HTML page with four text boxes. In my output, I am only getting object HTMLInputElement.
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
function nhap_number(){
var a = document.nhap.number_a;
var b = document.nhap.number_b;
}
function random_c(){
var c = Math.round(Math.random()*100)%100;
document.getElementById("number_c").value=c;
}
function random_d(){
var d = Math.round(Math.random()*100)%100;
document.getElementById("number_d").value=d;
}
function sum(number_a,number_b,number_c,number_d){
return(number_a+number_b+number_c+number_d);
alert("ddddddd");
}
function show(){
myDiv = document.getElementById("show");
myDiv.innerHTML = "sum: "+sum(number_a+number_b+number_c+number_d);
}
</script>
<body>
<div>
<form name = "nhap">
<p> input a: <input id = "number_a" type="text" placeholder="please input number a "/></p>
<p> input b: <input id = "number_b" type="text" placeholder="please input number b "/></p>
<p> input c: <input id = "number_c" placeholder="random number c "/><input type="button" value="value_c" onClick="random_c();"/></p>
<p> input d: <input id = "number_d" placeholder="random number d "/><input type="button" value="value_d" onClick="random_d();"/></p>
<input type="button" value="Valid Form" onClick="show();">
</form>
</div>
<div id="show">
</div>
</body>
</html>
You never defined number_a, number_b, ... and so on. Some browsers will define them as a HTML element being based on the id. So the value number_a will be referencing the HTML element with the id number_a in this case. Trying to print them will show the value [object HTMLInputElement], you will want to get the .value property of them, then convert them to a number:
+number_a.value // note the "+" converts the string to a number
// or
+document.getElementById("number_a").value // recommenced
Change in show() function
myDiv.innerHTML = "sum:"+sum(parseInt(document.getElementById('number_a').value)+parseInt(document.getElementById('number_b').value)+parseInt(document.getElementById('number_c').value)+parseInt(document.getElementById('number_d').value));
You were trying to add HTML elements together. Also do a parseInt of their values.
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
function nhap_number(){
var a = document.nhap.number_a;
var b = document.nhap.number_b;
}
function random_c(){
var c = Math.round(Math.random()*100)%100;
document.getElementById("number_c").value=c;
}
function random_d(){
var d = Math.round(Math.random()*100)%100;
document.getElementById("number_d").value=d;
}
function sum(number_a,number_b,number_c,number_d){
return(Number(number_a.value)+Number(number_b.value)+Number(number_c.value)+Number(number_d.value));
}
function show(){
myDiv = document.getElementById("show");
debugger;
myDiv.innerHTML = "sum: "+sum(number_a,number_b,number_c,number_d);
}
</script>
<body>
<div>
<form name = "nhap">
<p> nhap a: <input id = "number_a" type="text" placeholder="please input number a "/></p>
<p> nhap b: <input id = "number_b" type="text" placeholder="please input number b "/></p>
<p> nhap c: <input id = "number_c" placeholder="random number c "/><input type="button" value="value_c" onClick="random_c();"/></p>
<p> nhap d: <input id = "number_d" placeholder="random number d "/><input type="button" value="value_d" onClick="random_d();"/></p>
<input type="button" value="Valid Form" onClick="show();">
</form>
</div>
<div id="show">
</div>
</body>
</html>
I have a simple program that takes in an input and then should show that input multiplied up to 100. I am new to this, but have tried to get it to work before posting here. I have the link to the program that I am referring to.
I want the result to be shown, but I cannot figure out why it is not showing.
You can see what I have below. I think I do not have the html and javascript hooked up properly.
Here is my html:
<body>
<input type="number" id="NumToBMultiplied" class="value" placeholder="Enter an integer" />
<input type='submit' id='RunProg' class='button' />
<p> id='result'</p>
</body>
Here is my Javascript:
h = document.getElementByID('NumToBMultiplied');
var result = document.getElementbyID('RunProg').addEventListener('click', function () {
for (i = 0; i < 100; i++)
return i * h;
}
});
document.getElementByID('result').innerHTML = result;
http://jsbin.com/wayejequxu/1/edit?html,js,output
Any help is appreciated!
From how I understand your code, you are wanting to multiply the input 100 times, then output that into a HTML tag. The result in your example is not being added to the result paragraph as it isn't in the loop.
HTML
This is changed only slightly. Notice the onClick="solve()" to the button instead of adding an event listener.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="number" id="NumToBMultiplied" class="value" placeholder="Enter an integer"/>
<input type="submit" id="RunProg" onClick="solve()" class="button"/>
<p id="result"> </p>
</body>
</html>
Javascript
I've added a line break after each result of the for loop so the result is easier to read. And the output is cleared before a new solve() is run.
var output = document.getElementById("result");
function solve() {
var input = document.getElementById("NumToBMultiplied").value;
output.innerHTML = "";
for(i=0; i < 100; i++) {
output.innerHTML += i * input + "<br/>";
}
}
Result here: http://jsbin.com/foduyofewi/1/
You need to store your result in variable inside a callback and set innerHTML also in callback:
document.getElementById('RunProg').addEventListener("click", function() {
var result = 1;
var input = +h.value;
for (var i = 1; i < 100; i++) {
result *= i * input;
}
document.getElementById("result").innerHTML = result;
});
DEMO
Pure Javascript version:
function multiply(x) {
var result = document.getElementById('result');
result.innerHTML = x.value * 100;
}
<input type="number" id="NumToBMultiplied" class="value" onchange="multiply(this)" placeholder="Enter an integer"/>
<p id="result"></p>
This is the jQuery version:
$(document).ready(function() {
$('#NumToBMultiplied').on('change',function(){
$('#result').text($(this).val()*100);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="NumToBMultiplied" class="value" placeholder="Enter an integer"/>
<p id="result"></p>
Just some modification to your code to remove some of the typos and errors. I'm not sure you can return the result like how you have done it, a more traditional approach is shown below.
Full code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="number" id="NumToBMultiplied" class="value" placeholder="Enter an integer" />
<input type='submit' id='RunProg' class='button' />
<p id='result'> </p>
</body>
<script>
h = document.getElementById('NumToBMultiplied').value;
document.getElementById('RunProg').addEventListener('click', function () {
for (i = 0; i < 100; i++){
var result = h*i;
}
document.getElementById('result').innerHTML = result;
});
</script>
</html>