Develop Reference

Javascript Issue - HTML division Calculator

I'm in the learning phase the code works fine no issues, however I need to add the below features.
When clicking the mouse on the calculate button it does the calculation and spits the results out correct, however my question is I'd want to use the physical keyboard "enter key" to execute/press the calculate button.
Also I need the form to reset after 5 seconds automatically, how can I do that ?
.
<script Language="Javascript">function Calc(myform){var enternumber1=document.myform.number1.value;var enternumber1=parseFloat(enternumber1,10);if(isNaN(enternumber1)||(enternumber1<0)){alert(" Enter a valid number! ");document.myform.number1.value="";document.myform.number1.focus();}else{var enternumber2=document.myform.number2.value;var enternumber2=parseFloat(enternumber2,10);if(isNaN(enternumber2)||(enternumber2<0)){alert(" Enter a valid number! ");document.myform.number2.value="";document.myform.number2.focus();}else
document.myform.number3.value=enternumber1/enternumber2;}}</script>
<form name="myform">
<br />
<b>Enter your first number:</b> <input maxlength="" name="number1" size=" " type="text" /><br />
<br />
<b>Enter your second number:</b> <input maxlength="" name="number2" size="" type="text" /><br />
<br />
<input name="button" onclick="Calc(myform)" type="button" value="Calculate" /> <input name="Reset" type="Reset" /><br />
<br />
<b>The result is :</b> <input maxlength="" name="number3" size="" type="text" value="" /> </form>

Please try to be clear in whatever you are asking. Lets move to your query now:
From your query I can understand that you are facing issues in doing 2 things:
Calling your Calc('myform') function when Enter key is pressed in second input field. - I am not covering validation of form(should have validation function,to be called before calling Calc() function). Just add an id to both the form tag as well as the second input field.Let say you add myForm and num2 ids in form and second input field respectively.
Once added you can use following function:
<script type="text/javascript">
document.getElementById('num2').onkeypress = function (event) {
if (event.keyCode == 13) {
Calc(myform);
}
};
</script>
**Note:**In this function we are checking every key which is getting pressed when our cursor is in num2 field, if the key pressed is having code 13,which is the keycode of enter key, I am just calling the same function Calc() which you are already using.So it will do the same what its doing on click of Calculate button.
For resetting your form in every 5 seconds.Please add this function:
function resetForm() {
document.getElementById("myForm").reset()
}
setInterval(resetForm, 5000);
Note: We are calling setInterval function here to reset your form in every 5seconds.Please dont forget to add myForm id in your form.

Multiplying calculator

I am trying to create a simple calculator that takes a number from 1 text box and after hitting a submit button it takes the number and multiplies it by 92 then puts it in a read only box.
This is what I have so far:
<form name="1star">
<input type="text" name="input"/>
<input type="button" value="Enter" OnClick="1star.output.value == 1star.input.value * 92"/>
<br/>
<input type="text" name="output" readonly="readonly" />
</form>
This is not working and I could use some help. I know its easy but I am very new to js and I'm not understanding why this isn't working.

<form name="onestar">
<input type="text" name="input"/>
<input type="button" value="Enter" OnClick="onestar.output.value = onestar.input.value * 92"/>
<br/>
<input type="text" name="output" readonly="readonly" />
</form>
An identifier cannot start with a digit in JavaScript, so 1star is an error. Also, you wanted = (assignment), not == (comparison).
That said, there are a number of outdated or beginner practices above. If I was writing it, I would separate the script from the markup, and I'd use document.getElementById to fetch the element rather than relying on implicit variables defined by name. I would also explicitly parse the string into a number. But for now no need to worry about it too much. Even though the code seems much more complicated at first glance, it's all things that will make your life easier later, with bigger programs.
var input = document.getElementById('input');
var output = document.getElementById('output');
var button = document.getElementById('button');
button.addEventListener('click', function(evt) {
var value = parseInt(input.value, 10);
if (!isNaN(value)) {
output.value = value * 92;
}
});
<form>
<input type="text" id="input"/>
<input type="button" id="button" value="Enter"/>
<br/>
<input type="text" id="output" readonly="readonly" />
</form>

Setting input value when moving 'scroll control'

I've been working on a script that lets a user set a setting using HTML5' <input type="range", I've got it to work and got it to show a value on my site, but the thing is that I want the user set setting to be posted as a form input $_POST['gearsdrag'].
For clearification I'm providing a JSfiddle.
http://jsfiddle.net/hqdesf70/
The input I want to be sent is
<input id="r" type="text" name="gearsdrag" value="6000" />
But what the script set's is <input id="r" type="text" name="gearsdrag" />6000</input> and that's not being sent with $_POST.So is there a way to do this or maybe with get parameters or something.I can't figure it out.

Changing the function to this will insert the value into the input and from there you can post it is that what your after?
<script>function showValue(newValue)
{
//changing the "innerHTML" to "value" is what inserts it into the text field
document.getElementById("r").value = newValue;
document.getElementById("rr").innerHTML = newValue;
}
</script>
Keisti pavarą prie: <span id="rr">0</span> / RPM
<form action="test.php" method="post">
<input type="range" min="0" max="7800" value="0" step="100" onchange="showValue(this.value)" />
<input id="r" type="text" name="gearsdrag" value=""/>
<input type="submit" value="Nustatyti" />
</form>

Convert currencies in real time using jQuery and or Javascript

http://jsfiddle.net/6mMUs/
I want to have live currency rate inputs for Euros, Dollars and Pounds.
<input type="text" id="eurorate" style="margin-bottom:15px;"> Euros <br />
<input type="text" id="dollarrate" style="margin-bottom:15px;"> Dollars <br />
<input type="text" id="poundrate" style="margin-bottom:15px;"> Pounds
What's the proper way of assigning a multiplier to each of these 3 currencies and have them respond to change in ANY of the inputs in real time?
for example, if a dollar is 0.75 euros and it is 0.60 Pounds, when I enter '1' in the dollar field, the other fields should show the correct values when converted to the other currencies.
I tried doing this with setInterval but it is not truly real time, I want to know what's the proper alternative using keyup or something like that.
Any help is appreciated.

Use an onkeyup event on your input fields, and when the event fires you update the other ones.

A simple Method to Covert Currency
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
function changeTo(toType){
if(toType=="Pound")
cvrate = 0.86;
else
cvrate = 0.78;
$(".currency_change").each(function (index, element) {
var og_val = $(this).data("og-value");
var cvd_val = (og_val*cvrate).toFixed(2);
return $(this).html(cvd_val);
});
}
</script>
</head>
<body>
<br /><span class="currency_change" data-og-value="1254">1254</span>
<br /><span class="currency_change" data-og-value="145">145</span>
<br /><span class="currency_change" data-og-value="54">54</span>
<br /><span class="currency_change" data-og-value="254">254</span>
<br /><span class="currency_change" data-og-value="147">147</span><br />
<button onClick="changeTo('Pound');">Conver To Pound</button>
<button onClick="changeTo('Euro');">Conver To Euro</button>
</body>
</html>

live validation with javascript - onchange only triggered once

So I'm just testing something with js, basically the number in the first input has to be bigger than the number in the second input for the submit button to be activated.
The button get's disabled just right, but if I change the number it won't activate again
<!DOCTYPE HTML>
<html>
<body>
<input type='number' id='first' onchange="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
var first = document.getElementById('first').value;
var second = document.getElementById('second').value;
if(first > second){
document.getElementById('sub').disabled=false;
}else{
document.getElementById('sub').disabled=true;
}
}
</script>
<input type="submit" id="sub"/>
</body>
</html>
Edit:
The arrows of the number input trigger onchange it seems, that caused the problem

You have to add the onclick and onkeyup event in order to respond to mouse interactions and to inserts from the clipboard:
http://jsfiddle.net/wzvvN/1
<input type='number' id='first' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />
<input type='number' id='second' onkeyup="validateNumber()" onclick="validateNumber()" onchange="validateNumber()" />

Try binding the onfocus and onblur events to.
<input type='number' id='first' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>
<input type='number' id='second' onchange="validateNumber()" onfocus="validateNumber()" onblur="validateNumber()"/><br>

You may want to use onkeyup(), since onchange() gets called only when you switch focus to another element.
Also, your function is currently comparing strings. Use parseInt to convert to an integer and then compare. The following code works for me:
<html>
<body>
<input type='number' id='first' onkeyup="validateNumber()"/><br>
<input type='number' id='second' onkeyup="validateNumber()"/><br>
<script type="text/javascript" >
function validateNumber()
{
var first = parseInt(document.getElementById('first').value, 10);
var second = parseInt(document.getElementById('second').value, 10);
if(first > second){
document.getElementById('sub').disabled=false;
} else {
document.getElementById('sub').disabled=true;
}
}
</script>
<input type="submit" id="sub" disabled="disabled" />
</body>
</html>