function gener10k() {
let x = getRndInteger(10000, 100);
let x1 = getRndInteger(x, 10);
let x2 = x - x1;
let higherValue = numberToArray(x1);
const longiness_higher = higherValue.length;
let higherInput = document.getElementsByName("higher[]");
for (var i = 0; i < longiness_higher; i++) {
higherInput[i].value = higherValue[i].value;
}
alert('higherValue ' + x1 + ' ' + higherValue[0] + higherValue[1] + higherValue[2] + higherValue[3] + "higherInput " + higherInput[0] + higherInput[1].value + higherInput[2].value + higherInput[3].value);
}
function getRndInteger(max, min) {
return Math.floor(Math.random() * (max - min)) + min;
}
function getlength(number) {
return number.toString().length;
}
function numberToArray(number) {
let array = number.toString().split("");
return array.map(x => parseInt(x));
}
<body>
<div class="inputCoefs">
<div class="inputCoef1">
<input type="text" name="higher[]" class="coeficientsIn10000" />
<input type="text" name="higher[]" class="coeficientsIn10000" />
<input type="text" name="higher[]" class="coeficientsIn10000" />
<input type="text" name="higher[]" class="coeficientsIn10000" />
<input type="text" name="higher[]" class="coeficientsIn10000" />
</div>
<div class="output">
<button class="but" id="checkit" onclick="gener10k();">DO IT</button>
</div>
</div>
I expected to write particular digits to equivalent input array. But instead, I have undefined variables. What is the best way to write to input from an array?
let higherInput = document.getElementsByName("higer[]");
This statement gets an object.
let higherValue = numberToArray(x1);
This statement gets a number array.
In your for loop:
higherInput[i].value = higherValue[i].value;
In this statement, higherInput[i].value refer to your text box value,
but what's higherValue[i].value?
Just use higherValue[i].
You can use the statement below to see that higherValue[i] is a number.
console.log(typeof(higherValue[0]);
Related
I have to find the areas of a triangle using Heron's formula. I wrote this code but it is not calculating the area correctly.
For example I input sideA= 5, sideB= 4, sideC= 3 and the answer is supposed to be 6 but instead I get 72088
Can anybody help me fix this and explain why its happening?
function Triangle(sideA, sideB, sideC) {
this.sideA = sideA;
this.sideB = sideB;
this.sideC = sideC;
this.semiP = ((this.sideA + this.sideB + this.sideC) / 2);
this.area = function() {
return (Math.sqrt(this.semiP * ((this.semiP - this.sideA) * (this.semiP - this.sideB) * (this.semiP - this.sideC))));
}
}
function calculate() {
var sideA = document.getElementById('sideA').value;
var sideB = document.getElementById('sideB').value;
var sideC = document.getElementById('sideC').value;
var myTriangle = new Triangle(sideA, sideB, sideC);
document.getElementById('results').innerHTML = "Area: " + myTriangle.area();
}
<p>
Enter length of side a <input type='text' id="sideA" />
<br>
<br> Enter length of side b <input type='text' id="sideB" />
<br>
<br> Enter length of side c <input type='text' id="sideC" />
<div id="results"></div>
<button type="button" onclick="calculate()">Calculate</button>
The problem that you are having is the sideA, B and C variables are all of type STRINGs and not anything numeric. There are a few different solutions, in my answer I chose to use parseFloat to allow you to have decimal points as input as well as whole numbers.
function Triangle(sideA, sideB, sideC) {
this.sideA = parseFloat(sideA);
this.sideB = parseFloat(sideB);
this.sideC = parseFloat(sideC);
this.semiP = ((this.sideA + this.sideB + this.sideC) / 2);
this.area = function() {
return (Math.sqrt(this.semiP * ((this.semiP - this.sideA) * (this.semiP - this.sideB) * (this.semiP - this.sideC))));
}
}
function calculate() {
var sideA = document.getElementById('sideA').value;
var sideB = document.getElementById('sideB').value;
var sideC = document.getElementById('sideC').value;
var myTriangle = new Triangle(sideA, sideB, sideC);
document.getElementById('results').innerHTML = "Area: " + myTriangle.area();
}
<p>
Enter length of side a <input type='text' id="sideA" />
<br>
<br> Enter length of side b <input type='text' id="sideB" />
<br>
<br> Enter length of side c <input type='text' id="sideC" />
<div id="results"></div>
<button type="button" onclick="calculate()">Calculate</button>
I have a question I have simple JavaScript that do some basic stuff to a number from input. I have a question how can I make variable that will always track the new input value for example if I enter 123 and click on some of the following buttons I get the result, but if I now enter new number for example 54321 and click again on some of the buttons I start from the previous value. How can I make my variable change every time a new value is entered or changed ? Here is my code:
var number = document.getElementById("number");
var numberValue = number.value;
console.log(numberValue);
function plus() {
number.value = ++numberValue;
}
function minus() {
number.value = --numberValue;
}
function flip() {
var temp = numberValue;
var cifra, prevrten = 0;
while (temp > 0) {
cifra = temp % 10;
prevrten = (prevrten * 10) + cifra;
temp = temp / 10 | 0;
}
number.value = prevrten;
}
window.onload = function() {
number.value = "";
}
<div>
<input type="text" id="number" id="output" onload="restart();">
<input type="button" value="<" onclick="minus();">
<input type="button" value=">" onclick="plus();">
<input type="button" value="FLIP" onclick="flip();">
<input type="button" value="STORE" onclick="store();">
<input type="button" value="CHECK" onclick="check();">
</div>
I suggest you use a type="number" and case the value to number - her I use the unary plus to do so
You will need to read the value in all functions
let numberValue = 0;
function store() {}
function check() {}
function plus() {
numberValue = +number.value;
number.value = ++numberValue;
}
function minus() {
numberValue = +number.value;
number.value = --numberValue;
}
function flip() {
let numberValue = +number.value;
var cifra, prevrten = 0;
while (numberValue > 0) {
cifra = numberValue % 10;
prevrten = (prevrten * 10) + cifra;
numberValue = numberValue / 10 | 0;
}
number.value = prevrten;
}
window.addEventListener("load", function() {
let number = document.getElementById("number");
number.value = 0;
})
<div>
<input type="number" id="number" id="output" onload="restart();">
<input type="button" value="<" onclick="minus();">
<input type="button" value=">" onclick="plus();">
<input type="button" value="FLIP" onclick="flip();">
<input type="button" value="STORE" onclick="store();">
<input type="button" value="CHECK" onclick="check();">
</div>
Try using onChange="".
<input type="text" id="number" id="output" onload="restart();" onChange="updateVal();">
function updateVal() {
numberValue = number.value;
}
I would suggest, for something like this, it would be much easier to use React JS or another framework with state.
I'm trying to make a program where i put in to different times and get the difference in minute after clicking the "calculate" button. I'm not sure if my approach is correct, there may be some typo's.
I'v tried to make the different input values to number but it seems like there is another underlying problem which I can't see.
var hour1=document.getElementById("hour1");
var min1=document.getElementById("min1");
var hour2=document.getElementById("hour2");
var min2=document.getElementById("min2");
function calc(){
var minutt1=Number(hour1)*60+Number(min1);
var minutt2=Number(hour2)*60+Number(min2);
var resultat=0;
resultat = Number(minutt1) - Number(minutt2);
document.getElementById("result").innerHTML="Time differance is:" + Number(resultat);
}
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min1">
<button type="button" onclick="calc()">Regn ut</button>
<div id="result"></div>
I expect getting a number which represents the time difference in minutes, but the actual output is "NaN".
You need to get the value of hour1, min1, hour2, and min2. You also don't have an element min2:
var hour1=document.getElementById("hour1").value;
var min1=document.getElementById("min1").value;
var hour2=document.getElementById("hour2").value;
var min2=document.getElementById("min2").value;
What your code was trying to do was multiply and subtract HTML elements (never a good idea).
var hour1 = document.getElementById("hour1").value;
var min1 = document.getElementById("min1").value;
var hour2 = document.getElementById("hour2").value;
var min2 = document.getElementById("min2").value;
function calc() {
var minutt1 = Number(hour1) * 60 + Number(min1);
var minutt2 = Number(hour2) * 60 + Number(min2);
var resultat = 0;
resultat = Number(minutt1) - Number(minutt2);
document.getElementById("result").innerHTML = "Time differance is:" + Number(resultat);
}
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min2">
<button type="button" onclick="calc()">Regn ut</button>
<div id="result"></div>
Other answers are close, but you need to get the value of the inputs after you click the button
var hour1 = document.getElementById("hour1");
var min1 = document.getElementById("min1");
var hour2 = document.getElementById("hour2");
var min2 = document.getElementById("min2");
window.calc = function () {
var minutt1 = parseInt(hour1.value) * 60 + parseInt(min1.value);
var minutt2 = parseInt(hour2.value) * 60 + parseInt(min2.value);
var resultat = minutt1 - minutt2;
document.getElementById("result").innerHTML = "Time differance is:" + resultat;
console.log({minutt1:minutt1,minutt2:minutt2,resultat:resultat,
hour1:hour1,min1:min1,
hour2:hour2,min2:min2
})
};
<input type="number" id="hour1">:
<input type="number" id="min1"> -
<input type="number" id="hour2">:
<input type="number" id="min2">
<button type="button" onclick="calc()">Regn ut</button>
<div id="result"></div>
I've recently wrote this simple javascript calculator but it will not work, got any ideas?
function calculateMe() {
var x = document.getElementById("x");
var y = document.getElementById("y");
var e = x + y;
document.getElementById("a").innerHTML = e;
}
<center><input id="x"></input> +
<input id="y"></input><br><br>
<button onclick="calculateMe()">Submit</button><br><br>
<input id="a"></input>
You need to first get the value from the inputs, then set the value like:
function calculateMe() {
var x = +document.getElementById("x").value;
var y = +document.getElementById("y").value;
var e = x + y;
document.getElementById("a").value = e;
}
<input id="x"></input>+
<input id="y"></input>
<br>
<br>
<button onclick="calculateMe()">Submit</button>
<br>
<br>
<input id="a"></input>
The + in the document.getElementById code turns the strings you get into numbers.
<html>
<head>
<script>
function calculateMe() {
var x = parseInt(document.getElementById("x").value);
if(isNaN(x)){
x = 0;
document.getElementById("x").value=x;
alert("The value in the first text box is not a valid number.");
}
var y = parseInt(document.getElementById("y").value);
if(isNaN(y)){
y = 0;
document.getElementById("y").value=y;
alert("The value in the second text box is not a valid number.");
}
var e = x + y;
document.getElementById("a").value = e;
}
</script>
<title>Webpage</title>
</head>
<body>
<center>
<input id="x" type="text"> +
<input id="y" type="text"><br><br>
<button onclick="calculateMe()">Submit</button><br><br>
<input id="a" type="text" readonly>
</center>
</body>
</html>
I'm trying to make a projectile calculator, so it really need to change the way to calculate again & again until it is done.
<script>
function useif()
{
var Height = Number(document.getElementById("Height").value);
var Velocity = Number(document.getElementById("Velocity").value);
var Range = Number(document.getElementById("Range").value);
var First = ( ( ((Math.SQRT2 * Velocity) + (Math.sqrt(19.6) * Velocity * Height)) * Math.cos(0.785398163) ) / 9.8);
document.getElementById("First").innerHTML = First;
if (First < Range)
document.getElementById("show").innerHTML = "Need more velocity to success on this range";
else
{
for (var i = -1.570796327; i < MaxValue; i+0.000000001;)
{
( (( (Velocity * Math.sin(i)) + Math.sqrt(Velocity * Math.sin(i) * Velocity * Math.sin(i) - 19.6 * Height) )) / 9.8) * Velocity * Math.cos(i));
if (result >= Range) break;
document.getElementById("i").innerHTML = i;
var degree = i * 57.295779513;
document.getElementById("show").innerHTML = degree + "degree";
}
}
}
This is all of the function
<p>Height<br /><input id="Height" type="text" /><br></P>
<p>Range<br /><input id="Range" type="text" /><br></P>
<p>Velocity<br /><input id="Velocity" type="text" /><br></P>
<input type="button" value="Calculate!" onclick="useif()" />
<span id="show"></p>
I'm trying to show "degree" but I don't know why it didn't work
it seems that the problem is comming from the looping part that I'm really new to it and need lots of explanation
This is my JSfiddle just registered it
http://jsfiddle.net/#&togetherjs=1m70MQhEGo
You had a few useless assignments going on all over the place confusing your program and a few variables were missing. After using the "JSHint" button a few times on fiddle I came to this working conclusion. Hope this helps you out bud.
Try this:
HTML:
<p>Height
<br />
<input id="Height" type="text" />
<br>
</P>
<p>Range
<br />
<input id="Range" type="text" />
<br>
</P>
<p>Velocity
<br />
<input id="Velocity" type="text" />
<br>
</P>
<input type="button" value="Calculate!" onclick="useif()" /> <span id="show">Output here</span>
</p>
JS:
window.useif = function () {
var i;
var MaxValue = 3;
var Height = Number(document.getElementById("Height").value);
var Velocity = Number(document.getElementById("Velocity").value);
var Range = Number(document.getElementById("Range").value);
var First = ((((Math.SQRT2 * Velocity) + (Math.sqrt(19.6) * Velocity * Height)) * Math.cos(0.785398163)) / 9.8);
if (First < Range) document.getElementById("show").innerHTML = "Need more velocity to success on this range";
else {
for (i = -1.570796327; i < MaxValue; i += 0.0001) {
result = ((((Velocity * Math.sin(i)) + Math.sqrt(Velocity * Math.sin(i) * Velocity * Math.sin(i) - 19.6 * Height))) / 9.8) * Velocity * Math.cos(i);
if (result >= Range) break;
var degree = i * 57.295779513;
document.getElementById("show").innerHTML = degree + "degree";
}
}
};