Why is 0 being assigned to my variables??

My JavaScript numeric variables are being defaulted to 0 (zero) regardless of the value I enter for the HTML input. Whyyyy!?!?!? <!DOCTYPE html> <html> <head> <script languuage = "JavaScript"> ////CALCULATOR//// function calculate() { var cutLen1 = Number(document.getElementById(cutLen1)); console.log(cutLen1); var cutLen2 = Number(document.getElementById(cutLen2)); var cutTimes1 = Number(document.getElementById(cutTimes1)); var cutTimes2 = Number(document.getElementById(cutTimes2)); var stkLen1 = Number(document.getElementById(stkLen1)); var qty1 = Number(document.getElementById(qty1)); var mar1 = String(document.getElementById("mar1")); console.log("mar1"); var mar2 = String(document.getElementById("mar2")); var gp1 = String(document.getElementById("gp1")); var totalCuts = cutLen1 * cutTimes1; var totalStk = stkLen1 * qty1; document.getElementById("result").innerHTML = totalCuts; }///END OF CALCULATE FUNCTION </script> </head> <body> <div id = "cutlist"> <table border="2" align = "left"> <tr> <td>Cut Length</td> <td>Cut times</td> <td>Mark</td> <td>Length</td> <td>QTY</td> <td>Group</td> </tr> <tr> <td><input type="number" id=cutLen1></td> <td><input type="number" id=cutTimes1></td> <td><input type="string" id="mar1"></td> <td><input type="number" id=stklen1></td> <td><input type="number" id=qty1></td> <td><input type="string" id="gp1"></td> </tr> <tr> <td><input type="number" id="cutlen2"></td> <td><input type="number" id="cutTimes2"></td> <td><input type="string" id="mar2"></td> </tr> </table> </div> <div> <button id = "runButton" onclick= "calculate()" value= "result">Run</button> <p id = "result"></p> </div> </body> </html>

html javascript predefined-variables

20th Dec 2019, 2:31 AM

Curtis Cooper

5 Answers

+ 2

OMG I'm sorry, I missed one point on my previous reply. We are supposed to be working with *values* here, but we're not getting the values from the input elements. So here's what you need to do, add `.value` after each element reference for example: var v = Number(document.getElementById("element-id").value); And one last point, be sure each referenced elements' ID match with the one passed to `getElementById` function. Some I see didn't match still. In the name of curiosity, What is this code calculating anyways?

20th Dec 2019, 2:28 PM

Ipang

+ 3

document.getElementById needs a string argument given. I noticed some arguments are not valid string, so fix those first. I'm talking about those elements having these ID: cutLen1, cutLen2, cutTimes1, cutTimes2, stkLen1 and qty1 P.S. And can you tell me what are you doing (calculating) here, I don't have any idea. (Edit) For the next time when asking question regarding a code, please share the code link instead when the code is rather big (like more than 15 lines). Follow this guide on how to share links: https://www.sololearn.com/post/74857/?ref=app

20th Dec 2019, 3:07 AM

Ipang

+ 1

Sorry about the confusion, here's a link: https://code.sololearn.com/WXQw38Sh37sQ/# When I use a string argument to find the HTML user input element for "cutLen1", the JavaScript output for variable cutLen1 is always NaN. When I drop the quotation marks, I.e. var cutLen1=Number(document.getElementById(cutLen1)); the variable always outputs as 0 regardless of what number the user inputs. This code is in it's early stages but I'm eventually trying to create a cut optimizer that calculates the most efficient way to cut multiple pieces from one piece of stock.

20th Dec 2019, 1:50 PM

Curtis Cooper

+ 1

Thanks, that helped tremendously!

20th Dec 2019, 4:38 PM

Curtis Cooper

You're welcome 👌 But I still don't understand the idea of cutting one piece of stock into multiple pieces. In what front of business is this practiced or needed?

20th Dec 2019, 4:45 PM

Ipang