I'm getting NaN despite using parseInt or .value, and I don't understand why is that. I also tried changing the code, but then im getting undefined.
As a beginner I don't get what I'm doing wrong despite it being so simple. Any tips?
const btn = document.querySelector('.btn');
btn.addEventListener('click',calcWinner);
function calcWinner(e){
const powerG = document.querySelector('#power-g');
const techG = document.querySelector('#tech-g');
const chanceG = document.querySelector('#chance-g');
const powerF = document.querySelector('#power-f');
const techF = document.querySelector('#tech-f');
const chanceF = document.querySelector('#chance-f');
let gokuR = parseInt(powerG + techG + chanceG)
let friezeR = parseInt(powerF.value) + parseInt(techF.value) + parseInt(chanceF.value);
console.log(parseInt(gokuR.value));
}
<body>
<div class="container">
<div class="goku">
<h2>Battle chance</h2>
<form action="">
<input type="number" name="" id="power-g" >
<label for="power-g">Power</label>
<input type="number" name="" id="tech-g" >
<label for="tech-g">Technique</label>
<input type="number" name="" id="chance-g" >
<label for="chance-g">Chance</label>
</form>
</div>
<div class="frieza">
<h2>Battle chance</h2>
<form action="">
<input type="number" name="" id="power-f" >
<label for="power-f">Power</label>
<input type="number" name="" id="tech-f" >
<label for="tech-f">Technique</label>
<input type="number" name="" id="chance-f" >
<label for="chance-f">Chance</label>
</form>
</div>
</div>
<h1 >Winner : <span class="winner"></span></h1>
CalcWinner
<script src="app.js"></script>
</body>
First, grab the value instead of the element, e.g. like this:
const powerG = document.querySelector('#power-g').value;
Then use either parseInt, Number or + to convert the String number to an actual number, and you will be able to calculate the result.
Stack snippet
const btn = document.querySelector('.btn');
btn.addEventListener('click',calcWinner);
function calcWinner(e){
const powerG = document.querySelector('#power-g').value;
const techG = document.querySelector('#tech-g').value;
const chanceG = document.querySelector('#chance-g').value;
const powerF = document.querySelector('#power-f').value;
const techF = document.querySelector('#tech-f').value;
const chanceF = document.querySelector('#chance-f').value;
let gokuR = Number(powerG) + Number(techG) + Number(chanceG);
let friezeR = parseInt(powerF) + parseInt(techF) + parseInt(chanceF);
console.log(gokuR);
console.log(friezeR);
}
<div class="container">
<div class="goku">
<h2>Battle chance</h2>
<form action="">
<input type="number" name="" id="power-g" >
<label for="power-g">Power</label>
<input type="number" name="" id="tech-g" >
<label for="tech-g">Technique</label>
<input type="number" name="" id="chance-g" >
<label for="chance-g">Chance</label>
</form>
</div>
<div class="frieza">
<h2>Battle chance</h2>
<form action="">
<input type="number" name="" id="power-f" >
<label for="power-f">Power</label>
<input type="number" name="" id="tech-f" >
<label for="tech-f">Technique</label>
<input type="number" name="" id="chance-f" >
<label for="chance-f">Chance</label>
</form>
</div>
</div>
<h1 >Winner : <span class="winner"></span></h1>
CalcWinner
Without the HTML it is hard to give you an accurate answer. But parseInt() is meant for a string. You are trying to use it on elements instead of strings. You need to get the value of the HTML element instead of the element itself.
Instead of:
const powerG = document.querySelector('#power-g');
You would need to do something like:
const powerG = document.querySelector('#power-g').value;
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
Related
I have two text type inputs. I want to convert them into one textbox(Lowercase with dash) while typing just like below.
<input type="text" name="first">
<input type="text" name="last">
I want combine this two text box into another textbox
Example: Nikhil Patel to nikhil-patel
I am trying to combine below inputs but can't.
function conv(){
var title, author;
title = document.getElementById("title").value;
author = document.getElementById("author").value;
/*converting to LowerCase*/
title = String.toLowerCase(title);
author = String.toLowerCase(author);
var out = title + "-" + author;
document.getElementById("output").value = output;
}
<div class="form-group">
<label>Title :</label>
<input class="form-control" type="text" name="title" id="title" />
</div>
<div class="form-group">
<label>Author :</label>
<input class="form-control" type="text" name="author" id="author" />
</div>
<div class="form-group">
<label>Output :</label>
<input class="form-control" type="text" name="output" id="output"/>
</div>
Output is not printing automatically
Try This if you want like this...
var input = $('[name="first"],[name="last"]'),
input1 = $('[name="first"]'),
input2 = $('[name="last"]'),
input3 = $('[name="final"]');
input.change(function () {
input3.val(input1.val() + ' - ' + input2.val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" name="first" id="1" value="">
<input type="text" name="last" id="2" value="">
<input type="text" name="final" id="3" value="" readonly>
<HTML>
<HEAD>
<SCRIPT>
function conv(){
var first, second;
first = document.getElementById("first").value;
second = document.getElementById("second").value;
/*converting to LowerCase*/
first = String.toLowerCase(first);
second = String.toLowerCase(second);
var out = first + "-" + second;
document.getElementById("out").value = out;
}
</SCRIPT>
</HEAD>
<BODY>
<input type="text" name = "first" id="first" onkeyup = 'conv()'/>
<input type="text" name = "second" id ="second" onkeyup = 'conv()'/>
<input type="text" name = "out" id="out"/>
</BODY>
</HTML>
this is just a sample with 3 text boxes where
first two boxes will be for input
and third will auto populate using the javascript
I hope it'll help you. All is did was to add extra id's.
Background: I'm practicing arrays and functions and am having trouble computing the sum of array items. I'm pretty sure there is something wrong with the function I'm writing but I'm not sure what. Using 8 input fields I'm pulling data into a array one item at a time and converted to floating numbers(for now...I'll try to fix that later). I've created a function that will compute the total of this list but it only outputs NaN.
Any suggestions are highly appreciated!
function myfunction() {
list = [];
list[0] = parseFloat(document.getElementById('number1').value);
list[1] = parseFloat(document.getElementById('number2').value);
list[2] = parseFloat(document.getElementById('number3').value);
list[3] = parseFloat(document.getElementById('number4').value);
list[4] = parseFloat(document.getElementById('number5').value);
list[5] = parseFloat(document.getElementById('number6').value);
list[6] = parseFloat(document.getElementById('number7').value);
list[7] = parseFloat(document.getElementById('number8').value);
function total(myvals) {
let total = 0;
for (let i = 0; i <= myvals.length; i++) {
total += myvals[i];
}
return total;
}
document.getElementById('results').innerHTML = total(list);
}
<form>
<input type="text" name="number1" id="number1"><br>
<input type="text" name="number2" id="number2"><br>
<input type="text" name="number3" id="number3"><br>
<input type="text" name="number4" id="number4"><br>
<input type="text" name="number5" id="number5"><br>
<input type="text" name="number6" id="number6"><br>
<input type="text" name="number7" id="number7"><br>
<input type="text" name="number8" id="number8"><br>
<input type="submit" value="Compute Score" onclick="javascript:myfunction()">
</form>
<div id="results"></div>
Here is a simple example using a for loop with querySelectorAll.
Additionally, I cleaned up your code a bit. Run the snippet below:
EDIT: Included some comments to show what's happening.
function myfunction() {
let total = 0;
//get the value for each element being called by querySelectorAll
//add values to total to get a sum
document.querySelectorAll('input').forEach(el => total += +el.value);
//append the new value to the results div
document.querySelector('#results').innerHTML = total;
}
<form>
<input type="text" name="number1" id="number1"><br>
<input type="text" name="number2" id="number2"><br>
<input type="text" name="number3" id="number3"><br>
<input type="text" name="number4" id="number4"><br>
<input type="text" name="number5" id="number5"><br>
<input type="text" name="number6" id="number6"><br>
<input type="text" name="number7" id="number7"><br>
<input type="text" name="number8" id="number8"><br>
</form>
<br/><br/>
<button type="submit" onclick="myfunction()">Compute Score</button>
<br/><br/>
<div id="results"></div>
This is resolved. I was able to fix my source code by removing
"<=" in the for loop and adding "<" in its place. Thanks everyone, I will look over everything else for extra practice!
1 - in HTML forms and their elements use names.
2 - each element of a form can be accessed by name with the form as parent
3 - if several elements have the same name (with the same type of preference) then they form an object collection
PS: I have used here [... myForm.numX] to transform the myForm.numX collection to array, so that it can accept the arry.map () method
this way:
const myForm = document.forms['my-form']
, res = document.getElementById('results')
;
myForm.onsubmit = evt =>
{
evt.preventDefault() // disable submit
let list = [...myForm.numX].map(inp => parseFloat(inp.value))
res.textContent = list.reduce((t,v)=>t+v,0)
// control...
console.clear()
console.log( myForm.numX.length, JSON.stringify(list) )
}
<form name="my-form">
<input type="text" name="numX" placeholder="num 1"><br>
<input type="text" name="numX" placeholder="num 2"><br>
<input type="text" name="numX" placeholder="num 3"><br>
<input type="text" name="numX" placeholder="num 4"><br>
<input type="text" name="numX" placeholder="num 5"><br>
<input type="text" name="numX" placeholder="num 6"><br>
<input type="text" name="numX" placeholder="num 7"><br>
<input type="text" name="numX" placeholder="num 8"><br>
<button type="submit">Compute Score</button>
</form>
<div id="results">..</div>
i'm having trouble going trough making a calculator (sum only) of 5 inputs fields in html/javascript and i can't manage to find what's wrong in my code
i tried messing around with types such as int instead of var and passing the value into parseInt, i somehow managed to have a result like "11111" where it should be like "5" but alongside that case the result is never printed in the innerHTML even after i added the "if not null" condition
Here is my html
<body>
<h1 class="head-title"></h1>
<div class="input-group">
<label for="design">Design :</label>
<input class="input-text" type="number" id="design">
</div>
<div class="input-group">
<label for="plot">Plot :</label>
<input class="input-text" type="number" id="plot">
</div>
<div class="input-group">
<label for="character">Character :</label>
<input class="input-text" type="number" id="character">
</div>
<div class="input-group">
<label for="enjoyment">Enjoyment :</label>
<input class="input-text" type="number" id="enjoyment">
</div>
<div class="input-group">
<label for="music">Music :</label>
<input class="input-text" type="number" id="music">
</div>
<div class="button-group">
<button class="button-primary" onclick="ratingCompute();">Calculate</button>
</div>
<div class="input-group">
<label for="total">Rating :</label>
<p class="rating-score" id="total"></p>
</div>
</body>
and here is my javascript
function ratingCompute()
{
var designValue = document.getElementById("design").value;
var plotValue = document.getElementById("plot").value;
var charValue = document.getElementById("character").value;
var enjoyValue = document.getElementById("enjoyment").value;
var musicValue = document.getElementById("music").value;
var totalValue = designValue + plotValue + charValue + enjoyValue + musicValue;
if (totalValue != null)
{
document.getElementById("total").innerHTML = totalValue + "/10";
}
else
{
document.getElementById("total").innerHTML = "0/10";
}
}
Any clue?
JavaScript is not a type variable language try using let or const. And here is how you properly parse it. If you did it already then its because of your variable declaration.
let designValue = parseInt(document.getElementById("design").value);
let plotValue = parseInt(document.getElementById("plot").value);
let charValue = parseInt(document.getElementById("character").value);
let enjoyValue = parseInt(document.getElementById("enjoyment").value);
let musicValue = parseInt(document.getElementById("music").value);
In javascript you should use keyword var/let/const instead of int. and you have to convert String type input value to int using parseInt method.
Please check this:
function ratingCompute()
{
var designValue = parseInt(document.getElementById("design").value);
var plotValue = parseInt(document.getElementById("plot").value);
var charValue = parseInt(document.getElementById("character").value);
var enjoyValue = parseInt(document.getElementById("enjoyment").value);
var musicValue = parseInt(document.getElementById("music").value);
var totalValue = designValue + plotValue + charValue + enjoyValue + musicValue;
if (totalValue)
{
document.getElementById("total").innerHTML = totalValue + "/10";
}
else
{
document.getElementById("total").innerHTML = "0/10";
}
}
<body>
<h1 class="head-title"></h1>
<div class="input-group">
<label for="design">Design :</label>
<input class="input-text" type="number" id="design">
</div>
<div class="input-group">
<label for="plot">Plot :</label>
<input class="input-text" type="number" id="plot">
</div>
<div class="input-group">
<label for="character">Character :</label>
<input class="input-text" type="number" id="character">
</div>
<div class="input-group">
<label for="enjoyment">Enjoyment :</label>
<input class="input-text" type="number" id="enjoyment">
</div>
<div class="input-group">
<label for="music">Music :</label>
<input class="input-text" type="number" id="music">
</div>
<div class="button-group">
<button class="button-primary" onclick="ratingCompute()">Calculate</button>
</div>
<div class="input-group">
<label for="total">Rating :</label>
<p class="rating-score" id="total"></p>
</div>
</body>
As mentioned by #Joshua Aclan, JavaScript does not have an "int" variable declaration, only "var". Also you have to cast all of the inputs to int or float, because otherwise you are adding strings and the values of input fields are always strings. Also the output is most likely empty because int designValue... produces an error.
function ratingCompute()
{
var designValue = parseInt(document.getElementById("design").value);
var plotValue = parseInt(document.getElementById("plot").value);
var charValue = parseInt(document.getElementById("character").value);
var enjoyValue = parseInt(document.getElementById("enjoyment").value);
var musicValue = parseInt(document.getElementById("music").value);
var totalValue = designValue + plotValue + charValue + enjoyValue + musicValue;
if (totalValue != null)
{
document.getElementById("total").innerHTML = totalValue + "/10";
}
else
{
document.getElementById("total").innerHTML = "0/10";
}
}
Can any one help me with this, I'm trying to use this code on a POS to calculate the change to give a customer and it works for the must part.
The problem I'm having is if I an order costs £9.99 and I enter £10, instead of it calculating the change as £0.01 it calculates it as £ 0.009999999999999787
Here is the code that I'm using.
function sum() {
var og_total = document.getElementById('og_cart_total').value;
var og_tendered = document.getElementById('og_cash_tendered').value;
var og_change = (og_tendered - og_total).toFixed(2);
var og_symbol = '£';
if (!isNaN(og_change)) {
document.getElementById('og_change_given').value = og_symbol + og_change;
}
}
<input type="hidden" id="og_cart_total" value="19.99" onkeyup="sum();" />
<div class="control-group">
<label class="control-label" for="og_cash_tendered">Tendered:</label>
<div class="controls">
<input class="cm-autocomplete-off" type="text" name="payment_info[og_cash_tendered]" value="" id="og_cash_tendered" onkeyup="sum();" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="og_change_given">Change:</label>
<div class="controls">
<input type="text" name="payment_info[og_change_given]" id="og_change_given" value="£-19.99" readonly="readonly" />
</div>
</div>
there is this way but it's not as promising as it should. the best way is to use a library for long numbers if it worth the trouble.
function sum() {
var og_total = document.getElementById('txt1').value;
var og_tendered = document.getElementById('txt2').value;
var og_change = (og_tendered - og_total).toFixed(2);
var og_symbol = "£";
if (!isNaN(og_change)) {
document.getElementById('og_change_text').value = og_symbol + og_change;
}
}
<input type="text" id="txt1" value="9.99" readonly="readonly" onkeyup="sum();" />
<input type="text" id="txt2" onkeyup="sum();" />
<input type="text" readonly="readonly" id="og_change_text" />
I'm making an html question form. Based on the answers, it performs JavaScript algorithms. Then JavaScript takes the numbers it calculated and uses document.getElementById to put the answers in a hidden html form. PHP puts the form into variables, and updates the MYSQL row that was selected. I didn't show the actual calculations because it is over 300 lines of code. The values in the database are blank every time I click submit. Thanks to anyone who can help me out!!!
<html>
<form method="post" id="formformid">
//These are where the JavaScript values are entered.
<input class="hidden" name="processfnumaa" id="processfnum" type="number" value="0">
<input class="hidden" name="technologyfnumaa" id="technologyfnum" type="number" value="0">
<input class="hidden" name="staffingfnumaa" id="staffingfnum" type="number" value="0">
<input class="hidden" name="Question4aa" id="Question4aa" type="text">
<input class="hidden" name="Question5aa" id="Question5aa" type="text">
<input class="hidden" name="Question6aa" id="Question6aa" type="text">
<input class="hidden" name="Question7aa" id="Question7aa" type="text">
<input class="hidden" name="Question8aa" id="Question8aa" type="text">
<input class="hidden" name="Question9aa" id="Question9aa" type="text">
<input class="hidden" name="Question10aa" id="Question10aa" type="text">
<input class="hidden" name="Question11aa" id="Question11aa" type="text">
<input class="hidden" name="Question12aa" id="Question12aa" type="text">
<input class="hidden" name="Question13aa" id="Question13aa" type="text">
<input class="hidden" name="Question14aa" id="Question14aa" type="text">
<input class="hidden" name="Question15aa" id="Question15aa" type="text">
<input class="hidden" name="Question16aa" id="Question16aa" type="text">
<input class="hidden" name="Question17aa" id="Question17aa" type="text">
<input class="hidden" name="Question18aa" id="Question18aa" type="text">
<input class="hidden" name="Question19aa" id="Question19aa" type="text">
<input class="hidden" name="Question20aa" id="Question20aa" type="text">
<input class="hidden" name="Question21aa" id="Question21aa" type="text">
<input class="hidden" name="Question22aa" id="Question22aa" type="text">
<input class="hidden" name="Question23aa" id="Question23aa" type="text">
<input class="hidden" name="Question24aa" id="Question24aa" type="text">
<input class="hidden" name="Question25aa" id="Question25aa" type="text">
<input type="button" id="savebutton" onclick="submitthatform()" value="Save Changes" style="display: none;" />
</form>
//This function is called when the user is done editing the answers in a different form.
<script type="text/javascript">
function submitthatform() {}
document.getElementById("Question4aa").value = a;
document.getElementById("Question5aa").value = b;
document.getElementById("Question6aa").value = c;
document.getElementById("Question7aa").value = d;
document.getElementById("Question8aa").value = e;
document.getElementById("Question9aa").value = f;
document.getElementById("Question10aa").value = g;
document.getElementById("Question11aa").value = h;
document.getElementById("Question12aa").value = i;
document.getElementById("Question13aa").value = j;
document.getElementById("Question14aa").value = k;
document.getElementById("Question15aa").value = l;
document.getElementById("Question16aa").value = m;
document.getElementById("Question17aa").value = n;
document.getElementById("Question18aa").value = o;
document.getElementById("Question19aa").value = p;
document.getElementById("Question20aa").value = q;
document.getElementById("Question21aa").value = r;
document.getElementById("Question22aa").value = s;
document.getElementById("Question23aa").value = t;
document.getElementById("Question24aa").value = u;
document.getElementById("Question25aa").value = v;
var awsasdg = document.getElementById("Question4aa").value;
alert(awsasdg);
document.getElementById("processfnum").value = processfinalnumber;
document.getElementById("technologyfnum").value = technologyfinalnumber;
document.getElementById("staffingfnum").value = staffingfinalnumber;
document.getElementById("formformid").submit();
}
</script>
</html>
<?php
//Here, I'm trying to update a row in my database. This is just the part of the file that ends up blank in the database.
$Question4aa = mysql_real_escape_string($_POST['Question4aa']);
$Question5aa = mysql_real_escape_string($_POST['Question5aa']);
$Question6aa = mysql_real_escape_string($_POST['Question6aa']);
$Question7aa = mysql_real_escape_string($_POST['Question7aa']);
$Question8aa = mysql_real_escape_string($_POST['Question8aa']);
$Question9aa = mysql_real_escape_string($_POST['Question9aa']);
$Question10aa = mysql_real_escape_string($_POST['Question10aa']);
$Question11aa = mysql_real_escape_string($_POST['Question11aa']);
$Question12aa = mysql_real_escape_string($_POST['Question12aa']);
$Question13aa = mysql_real_escape_string($_POST['Question13aa']);
$Question14aa = mysql_real_escape_string($_POST['Question14aa']);
$Question15aa = mysql_real_escape_string($_POST['Question15aa']);
$Question16aa = mysql_real_escape_string($_POST['Question16aa']);
$Question17aa = mysql_real_escape_string($_POST['Question17aa']);
$Question18aa = mysql_real_escape_string($_POST['Question18aa']);
$Question19aa = mysql_real_escape_string($_POST['Question19aa']);
$Question20aa = mysql_real_escape_string($_POST['Question20aa']);
$Question21aa = mysql_real_escape_string($_POST['Question21aa']);
$Question22aa = mysql_real_escape_string($_POST['Question22aa']);
$Question23aa = mysql_real_escape_string($_POST['Question23aa']);
$Question24aa = mysql_real_escape_string($_POST['Question24aa']);
$Question25aa = mysql_real_escape_string($_POST['Question25aa']);
$processfnumaa = mysql_real_escape_string($_POST['processfnumaa']);
$technologyfnumaa = mysql_real_escape_string($_POST['technologyfnumaa']);
$staffingfnumaa = mysql_real_escape_string($_POST['staffingfnumaa']);
if($_SERVER['REQUEST_METHOD'] === 'POST'){
mysql_query("UPDATE HuronForm1 SET Question4aa='$question4aa',Question5aa='$question5aa',Question6aa='$question6aa',Question7aa='$question7aa',Question8aa='$question8aa',Question9aa='$question9aa',Question10aa='$question10aa',Question11aa='$question11aa',Question12aa='$question12aa',Question13aa='$question13aa',Question14aa='$question14aa',Question15aa='$question15aa',Question16aa='$question16aa',Question17aa='$question17aa',Question18aa='$question18aa',Question19aa='$question19aa',Question20aa='$question20aa',Question21aa='$question21aa',Question22aa='$question22aa',Question23aa='$question23aa',Question24aa='$question24aa', processfnum='$processfnumaa', technologyfnum='$technologyfnumaa',staffingfnum='$staffingfnumaa',Question25aa='$question25aa' WHERE Id='$idchosen'");
}
?>
Maybe you would use the same case for variables?
If you have var $Question4aa, it should be the same in mysql string, not $question4aa