Taking Values from HTML and returning another

Question

I'm not sure how to take 2 inputs and return another value. Also is there any way for me to be able to tell where my code is going wrong? I'm still trying to understand all the nuances of how HTML and Javascript work together. I'm currently reading through Eloquent javascript but i'm always looking for suggested resources.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Wilks</title>
        <script type="text/javascript" src="wilks.js"></script>
    </head>
    <body>
        <p>
            <label for="bodyWeight">Weight:</label> 
            <input id="bodyWeight" type="number" placeholder="Pounds">
            <label for="Big 3 Total">Big 3 Total:</label>
            <input id="liftTotal" type="number" placeholder="800" >
            <button onclick="wilksCalculator(bodyWeight, liftTotal)">Analyze</button>
        </p>
        <p>Wilks Coefficient: <span id="outputWilks"></span></p>
    </body>
</html>

// wilks.js

var a =-216.0475144;
var b =16.2606339;
var c =-0.002388645;
var d =-0.00113732;
var e =7.01863E-06;
var f =-1.291E-08;
var x = document.getElementById("bodyWeight").value;
var inputTotal = document.getElementById("liftTotal").vaule;
//var outputWilks;

function wilksCalculator(bodyWeight, liftTotal) {
    bodyWeight = x;
    return (liftTotal * (500/((a+b*x)+(c(Math.pow(x,2)))+(d+(Math.pow(x,3)))+(e+(Math.pow(x,4)))+(f(Math.pow(x,5))))));

}

var wilks = document.getElementById("outputWilks").innerHTML;
if (wilks) {
    wilks.onsubmit = function () {
        this.wilks.value = wilksCalculator(this.bodyWeight.value, 
        this.liftTotal.value);
        return false;
    };
}

wilksCalculator();

"is there any way for me to be able to tell where my code is going wrong?" Check the console for errors. — jmargolisvt
– jmargolisvt, Commented Feb 13, 2018 at 18:54
there is a typo on 2nd last line vaule instead of value and also paste the function wilksCalculator for further guidance — Uzair
– Uzair, Commented Feb 13, 2018 at 18:57
A string (the output of .innerHTML) does not have an onsubmit property. — Heretic Monkey
– Heretic Monkey, Commented Feb 13, 2018 at 18:59

Farooq Ahmad Bhat · Accepted Answer · 2018-02-13 19:10:10Z

1

Try this

<p>
   <label for="bodyWeight">Weight:</label>  
<input id="bodyWeight" type="number" placeholder="Pounds"**/>**
<label for="Big 3 Total">Big 3 Total:</label>
<input id="liftTotal" type="number" placeholder="800" **/>**
<button onclick="wilksCalculator(bodyWeight, liftTotal)">Analyze</button>
</p>
<p>Wilks Coefficient: <span id="outputWilks"></span></p>

answered Feb 13, 2018 at 19:10

Farooq Ahmad Bhat

458 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Schultheiss · Accepted Answer · 2018-02-13 22:46:12Z

0

I would add event listeners, then get values and calculate.

Note some errors in your function c(.. would be a function call, assumed you wanted to multiply. Same with f., Check the formula.

Took the variables out of global scope and put in the function. Fixed some typos.

function wilksCalculator(bodyWeight, liftTotal) {
  var a = -216.0475144;
  var b = 16.2606339;
  var c = -0.002388645;
  var d = -0.00113732;
  var e = 7.01863E-06;
  var f = -1.291E-08;
  var x = bodyWeight;
  return (liftTotal * (500 / ((a + b * x) + (c * (Math.pow(x, 2))) + (d + (Math.pow(x, 3))) + (e + (Math.pow(x, 4))) + (f * (Math.pow(x, 5))))));

}

function wilksClick() {
  var wilks = document.getElementById("outputWilks");
  var bodyWeight = document.getElementById("bodyWeight").value;
  var liftTotal = document.getElementById("liftTotal").value;
  wilks.innerHTML = wilksCalculator(bodyWeight, liftTotal);
  return false;
}
var el = document.getElementById("calculate-wilks");
el.addEventListener("click", wilksClick, false);

<body>
  <p>
    <label for="bodyWeight">Weight:</label>
    <input id="bodyWeight" type="number" placeholder="Pounds">
    <label for="liftTotal">Big 3 Total:</label>
    <input id="liftTotal" type="number" placeholder="800">
    <button id="calculate-wilks">Analyze</button>
  </p>
  <p>Wilks Coefficient: <span id="outputWilks"></span></p>
</body>

answered Feb 13, 2018 at 22:46

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

1 Comment

Mark Schultheiss Over a year ago

Note I did nothing about validating the input (range, numeric etc), just used it.

Collectives™ on Stack Overflow

Taking Values from HTML and returning another

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related