Develop Reference

button Function onclick not display in text filed

I'm writing a code that display content in text field on button submit click, but the code below is not working
<script>
function myFunction() {
var x = document.getElementById("cost").value;
if (document.getElementById("cost").value;) {
var netprofit = x-(16/100*x);
document.getElementById("net").value = +netprofit;
else if (document.getElementById("cost").value;) {
var commission = netprofit * 35/100;
document.getElementById("comm").value = +commission;
}
}
}
</script>
<form action="" method="POST">
<input type="text" id="cost" placeholder="kindly enter the cost value of project"><br><br>
<input type="text" name="" id="net" readonly="readonly"><br><br>
<input type="text" name="" id="comm" readonly="readonly"><br><br>
<input type="submit" value="Calculate" onclick="myFunction()">
</form>
I expect result to display in an input text onClicking button

As Harpel pointed out, you have to prevent the form from submitting. This is default behavior for forms that contain a input of type submit. I'd also suggest reorganizing your code a bit (vars for each input you selecting, etc). Something like the below:
<script>
function myFunction(event) {
event.preventDefault();
var costInput = document.getElementById("cost");
var netInput = document.getElementById("net");
var commInput = document.getElementById("comm");
if (costInput.value) {
var netprofit = costInput.value - (16/100 * costInput.value);
netInput.value = netprofit;
} else if (costInput.value) {
var commission = netprofit * 35/100;
commInput.value = commission;
}
}
</script>
<form action="" method="POST">
<input type="text" id="cost" placeholder="kindly enter the cost value of project"><br><br>
<input type="text" name="" id="net" readonly="readonly"><br><br>
<input type="text" name="" id="comm" readonly="readonly"><br><br>
<input type="submit" value="Calculate" onclick="myFunction(event)">
</form>
One additional thing; I'm not sure what the if statement is supposed to be checking, as it seems to be checking the same condition. If that's the case, you can just place both calculations for the input values into one if check like:
if (costInput.value) {
var netprofit = costInput.value - (16/100 * costInput.value);
netInput.value = netprofit;
var commission = netprofit * 35/100;
commInput.value = commission;
}

Your input type is submit. So it will always submit form and reload the page. You can do in function like
"return false" from your function,
event.preventDefault() add in your function //it will avoid the default behavior (in your case submit form).
Or use button in your HTML in place of ("input" with type "submit").
Here is working snippet, but i don't know why you are writing same condition in "if" and "else if"
function myFunction(e) {
e.preventDefault();
var cost = document.getElementById("cost").value;
if (cost) {
cost = +cost;
var netprofit = cost - (16 / 100 * cost);
var commission = netprofit * 35 / 100;
document.getElementById("net").value = +netprofit;
document.getElementById("comm").value = +commission;
}
}
<form action="" method="POST">
<input type="text" id="cost" placeholder="kindly enter the cost value of project"><br><br>
<input type="text" name="" id="net" readonly="readonly"><br><br>
<input type="text" name="" id="comm" readonly="readonly"><br><br>
<input type="submit" value="Calculate" onclick='myFunction(event)'>
</form>

<form action="" method="POST">
<input type="text" id="cost" placeholder="kindly enter the cost value of project"><br><br>
<input type="text" name="" id="net" readonly="readonly"><br><br>
<input type="text" name="" id="comm" readonly="readonly"><br><br>
<input type="button" value="Calculate" onclick="myFunction()">
</form>
<script>
function myFunction() {
var x = document.getElementById("cost").value;
if (document.getElementById("cost").value) {
var netprofit = x - (16 / 100 * x);
document.getElementById("net").value = +netprofit;
}
else if (document.getElementById("cost").value) {
var commission = netprofit * 35 / 100;
document.getElementById("comm").value = +commission;
}
}
</script>
Output

how can i get input text value and pass in button onclick method in javascript function pass by values

function addData (n1, n2) {
alert(fn+ln);
}
<body>
<input Type="text" name="n1">
<input Type="text" name="n2">
<button onClick="addData(n1.value,n2.value)">click</button>
</body>
its give me the following error:
ReferenceError: n1 is not defined.

You cannot get the value of the input by using n1.value You need to obtain the DOM element using document.getElementById and use its value to obtain the string value and parse it as Integer before you add them.
See this:
function addData (n1, n2) {
n1Val = parseInt(n1.value);
n2Val = parseInt(n2.value);
alert(n1Val+n2Val);
}
<body>
<input Type="text" id="n1">
<input Type="text" id="n2">
<button onClick="addData(document.getElementById('n1'), document.getElementById('n2'))">click</button>
</body>
If you want to merely concatenate the data and not add it, just remove the parseInt call and add the strings like in the following example:
function addData (n1, n2) {
n1Val = n1.value;
n2Val = n2.value;
alert(n1Val+n2Val);
}
<body>
<input Type="text" id="n1">
<input Type="text" id="n2">
<button onClick="addData(document.getElementById('n1'), document.getElementById('n2'))">click</button>
</body>
Hope it helps!!

Do like this way:
function addData (e) {
var rec = 0;
var t = document.getElementsByTagName('input');
for(var i=0;i<t.length;i++){
rec=rec+parseInt(t[i].value);
}
console.log(rec);
}
<script>
</script>
<body>
<input Type="text" name="n1">
<input Type="text" name="n2">
<button onClick="addData(this)">click</button>
</body>

<html>
<head>
<title>Input tutorial</title>
<script language="javascript">
function addNumbers()
{
var val1 = parseInt(document.getElementById("value1").value);
var val2 = parseInt(document.getElementById("value2").value);
var ansD = document.getElementById("answer");
var final = val1 + val2;
alert(final);
}
</script>
</head>
<body>
value1 = <input type="text" id="value1" name="value1" value="1" /> value2 = <input type="text" id="value2" name="value2" value="2" />
<input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()" />
</body>
</html>

HTML JavaScript random number select

I have been trying to get a random number generator for the numbers to be between the two inputs. I have a code
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
function myFunction() {
var x = document.getElementById("randnum")
x.innerHTML = Math.floor((Math.random() * 'low') + 'high');
}
</script>
As you would have noticed, I have the javascript in the one code.
where I put in 'low' and 'high' works with a fixed number

You need to get the value of the inputs and apply them to the calculations. - note that i am using parseInt() to convert the input values to numbers. Also - using 1 will as the low value will always yield are result of 10 since your getting the math.floor - which will equate to 0 - so 0 + 10 = 10.
Based on #Quentins comment - i alered the caluclation to suit your numbers.
function myFunction() {
var x = document.getElementById("randnum");
var high = parseInt(document.getElementById("high").value);
var low = parseInt(document.getElementById("low").value);
x.innerHTML = Math.floor(Math.random()*(high-low+1)+low)
}
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>

<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
myFunction = () => {
let min = parseInt(low.value, 0);
let max = parseInt(high.value, 0);
let x = document.getElementById("randnum")
x.innerHTML = Math.floor(Math.random() * (max - min)) + min;
}
</script>

I think this will help.
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number" value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number" value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
function myFunction() {
var x = document.getElementById("randnum")
var low = document.getElementById("low").value;
var high = document.getElementById("high").value;
x.innerHTML = Math.floor((Math.random() * low) + high);
}
</script>

var max = parseInt($("#high")[0].value);
var min = parseInt($("#low")[0].value);
x.innerHTML = Math.floor(Math.random() * max) + min;

First, in (Math.random() * 'low') + 'high', low and high are not really the integer values.
Second, a very IMPORTANT issue others did not mention is that Math.random() returns a double value between 0 and 1. If you follow some of the other answers, the random number will always be 0.
use this:
<form action="/action_page.php">
<input type="number" name="low" id="low" placeholder="lowest number"
value="1"><br>
<input type="number" name="high" id="high" placeholder="highest number"
value="10"><br>
<input type="button" value="Submit" onclick="myFunction()">
</form>
<p id="randnum"></p>
<script>
function myFunction() {
var x = document.getElementById("randnum")
var low = document.getElementById("low").value;
var high = document.getElementById("high").value;
var random = Math.random();
x.innerHTML = Math.floor(random * (high-low) + high);
}
</script>

JavaScript Fibonacci Calculator: How to output answer into text box?

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>

why this code has error

//this is a part of html code
<form>
<b>user:</b> <input type="text" name="user" size="25"/>
<input type="button" name ="submit" value="confirm" onclick= "mehdi(this.form)"/>
</form>
<script type="text/javascript">
function mehdi(rno){
rno.user.value = 2 * Math.PI ;//this is error line user is unknown
alert(rno);
return rno;
}
</script>
what can i do?

Try This
<form>
<b>user:</b> <input type="text" name="user" size="25"/>
<input type="button" name ="submit" value="confirm" onclick= "mehdi(this.form)">
</form>
<script type="text/javascript">
function mehdi(rno)
{
rno.user.value = 2 * Math.PI ;//this is error line user is unknown
alert(rno.user.value);
return rno.user.value;
}
</script>