Develop Reference

How to print the values in the same input text field using JS

I have created 5 input text boxes using HTML and made a button while clicking the button the values will print the result input text box. The first 4 fields are my inputs and the last text field is my output. unable to debug the issue. kindly find the code and help to find the issue.
function JS(){
var h=document.getElementById('h').value;
var w=document.getElementById('w').value;
var g=document.getElementById('g').value;
var t=document.getElementById('t').value;
var total =(h+w+g+t);
document.getElementById('result').innerHTML=total;
}
<h2> Calculator</h2>
<input type="text" placeholder="value1" id="h">
<input type="text" placeholder="value2"id="w">
<input type="text" placeholder="value3" id="g">
<input type="text" placeholder="value4" id="t">
<input type="text" placeholder="result" id="result">
<!--
<p
id="result">
</p>
-->
<button id="btn" onClick="JS()">Calculate</button>

There are two keys to resolving your issue:
Coerce your inputs to numbers, which I'm doing by adding a + in front of the value assignments. If you don't do this, your values may be treated like strings and concatenated rather than added like numbers.
Set the value of the input element, not the innerHTML. If you'd rather use a <p> element, which it appears you commented out in your sample code (and which I restored for completeness of my answer), consider using innerText.
See example here:
function JS() {
var h = +document.getElementById('h').value;
var w = +document.getElementById('w').value;
var g = +document.getElementById('g').value;
var t = +document.getElementById('t').value;
let p_result = document.getElementById('p_result');
var total = (h + w + g + t);
document.getElementById('result').value = total;
p_result.innerText = total;
}
<h2> Calculator</h2>
<input type="text" placeholder="value1" id="h">
<input type="text" placeholder="value2" id="w">
<input type="text" placeholder="value3" id="g">
<input type="text" placeholder="value4" id="t">
<input type="text" placeholder="result" id="result">
<br>
<p id="p_result" style="color:red;"></p>
<br>
<button id="btn" onClick="JS()">Calculate</button>

function JS(){
var h=document.getElementById('h').value;
var w=document.getElementById('w').value;
var g=document.getElementById('g').value;
var t=document.getElementById('t').value;
var total =(Number(h)+Number(w)+Number(g)+Number(t));
document.getElementById('result').value =total;
}
.value instead of .innerHTML
also, you should convert inputs values to number cause instead of making the sum will be as consider them string( for example if you type 1 , 2 , 3 , 4 without converting to number will be 1234 if you convert to number will be 10

Button only appears or becomes enabled when user scores a certain figure?

I have a radio button form where a numerical value is attributed to each selection. The score is totaled up at the end of the form. A user needs to score a certain amount in order to submit an application.
I have the submit button disabled in the html. I need it to enable only when the user scores over 60. I have tried a few variations of the code but the button just remains disabled. Can anyone point me in the right direction?
</li>
<p>Total Score:<span id="total">0</span></p>
<input type="submit" name="submit_name" value="OK"
class="submit_class" id="SubmitButton" disabled/>
</form>
</body>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script language="javascript">
$(":radio").on("change", function() {
var total = 0;
$(":radio:checked").each(function() {
total += Number(this.value);
});
$("#total").text(total);
});
//ENABLE SUBMIT BUTTON CODE ACCORDING TO SCORE
function submitOnly() {
var current = $('.total').filter(':checked');
if (current.score >= 60) {
sbmtBtn.disabled = false;
}
};
</script>
</html>

In your jquery, you can make a check every time the score changes like so:
$(":radio").on("change", function() {
var total = 0;
$(":radio:checked").each(function() {
total += Number(this.value);
if (total > 60) {
$("#SubmitButton").prop('disabled', false);
}
});
$("#total").text(total);
});
<p>Total Score:<span id="total">0</span></p>
<input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton" disabled />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Can't get result to display in page below input

I can't get the result to display on the html page, which is why i have it as an alert
<h1>Factorial Problem</h1>
<form name="frm1">
Enter any number :<input type="text" name="fact1"><br><br>
<input type="submit" value="Calculate" onclick="fact(frm1.fact1.value)">
here is the JavaScript
function fact(n){
var m=1;
while(n){
m=m*n;
n--;
}
alert("Factorial of given number :"+" "+ m);
}

You need to add an identifier in the DOM to inject the value with JS.
As an example, I toke you'r code and added a div with the id with the value 'result'.
Then with JS, we inject the value in the DOM on the click event of you'r button.
<h1>Factorial Problem</h1>
<form name="frm1">
Enter any number :<input type="text" name="fact1"><br><br>
<div id="result"></div>
<input type="button" value="Calculate" onclick="fact(frm1.fact1.value)">
function fact(n){
var m=1;
while(n){
m=m*n;
n--;
}
var el = document.getElementById('result');
el.innerHTML = "Factorial of given number :"+" "+ m;
// alert("Factorial of given number :"+" "+ m);
}

<body>
<h1>Factorial Problem</h1>
Enter any number :<input type="text" id="fact1"><br><br>
<input type="submit" value="Calculate" onclick="fact()">
<p id="result"></p>
</body>
function fact(){
var m=1;
var n=document.getElementById("fact1").value;
while(n){
m=m*n;
n--;
}
//alert("Factorial of given number :"+" "+ m);
document.getElementById("result").innerHTML=m;
}

How can I concatenate value in HTML and JavaScript?

For example
<input type="text" name="disp">
<input type="button" name="but0" value="0" onclick=""+"calc.disp.value=0"+"">
Here if I click the button 0 means it should display the 0 in text box. If I click the button it should concatenate in that box. But it replaces that is the code is wrong.

As far as I understand it, you want each button click to add 0 to the text box contents. So it starts out empty, and when you push the button the first time, the contents changes to 0. Pushing it a second time changes the contents to 00.
Assuming that's correct, try this:
<input type="text" name="disp">
<input type="button" name="but0" value="0" onclick="calc.disp.value=calc.disp.value + '0';">

If you are allowed to use jQuery I would suggest that as the code needed then becomes a lot easier to see what is going on:
First add an id attribute to each input.
<input type="text" name="disp" id="textBox">
<input id="button0" type="button" name="but0" value="0">
you want to add 0s? so if you entered 1 then you hit the 0 button it will show 10 then again will change to 100:
<script type="text/ecmascript">
$(document).ready(function()
{
$("#button0").click(function()
{
var textVal = $("#textBox").val();
$("#textBox").val(textVal + 0);
});
});
</script>
Example here

Hi you can do it by following way
<input type="text" name="tst" id="tst">
<input type="button" value="0" onclick="javascript:document.getElementById('tst').value = document.getElementById('tst').value + this.value "

var sum = document.getElementById("id1").value
+ document.getElementById("id2").value
+ document.getElementById("id3").value;

Adding new text box using javascript

I have a webpage. There is a button called add. When this add button is clicked then 1 text box must be added. This should happen at client side only.
I want to allow the user to add at most 10 text boxes.
How can I achieve it using javascript?
example:
only 1 text box is displayed
user click add >
2 text boxes displayed
user clicks add >
I also wants to provide a button called "remove" by which the user can remove the extra text box
Can anyone provide me a javascript code for this??

Untested, but this should work (assuming an element with the right id exists);
var add_input = function () {
var count = 0;
return function add_input() {
count++;
if (count >= 10) {
return false;
}
var input = document.createElement('input');
input.name = 'generated_input';
document.getElementbyId('inputs_contained').appendChild(input);
}
}();
add_input();
add_input();
add_input();

A solution using the jQuery framework:
<form>
<ul class="addedfields">
<li><input type="text" name="field[]" class="textbox" />
<input type="button" class="removebutton" value="remove"/></li>
</ul>
<input type="button" class="addbutton" value="add"/>
</form>
The jQuery script code:
$(function(){
$(".addbutton").click(){
if(".addedfields").length < 10){
$(".addedfields").append(
'<li><input type="text" name="field[]" class="textbox" />' +
'<input type="button" class="removebutton" value="remove"/></li>'
);
}
}
// live event will automatically be attached to every new remove button
$(".removebutton").live("click",function(){
$(this).parent().remove();
});
});
Note: I did not test the code.
Edit: changed faulty quotation marks

I hope you are using jQuery.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
var counter = 2;
$("#add").click(function () {
if(counter==11){
alert("Too many boxes");
return false;
}
$("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' id='t"+counter+"' > </div>\n");
++counter;
});
$("#remove").click(function () {
if(counter==1){
alert("Can u see any boxes");
return false;
}
--counter;
$("#d"+counter).remove();
});
});
// --></script>
</head><body>
<div id='textBoxes'>
<div id='d1' ><label for="t1"> Textbox 1</label><input type='textbox' id='t1' ></div>
</div>
<input type='button' value='add' id='add'>
<input type='button' value='remove' id='remove'>