Javascript multiplication_问答_开发者_运维开发者技术经验分享

I can't get my variables to multiply. For some strange reason, my variable values are called from input fields, but I've even tried to give them default values as below which still isn't working.

var conMin = document.getElementById('cMin').value;
var serLev = document.getElementById('sLev').value;
var noFrames = 1800;
var noFramesTot = noFrames*24;
var coresTest = document.getElementById('coresintest').value;
var estCoreHours = 200;
var art = 20;
var coreHrs = noFrames * coresTest * art;

alert(coreHrs);

My alert isn't working correctly, however if I remove the art variable from the multiplication this then works. I've tried adding parseInt() to each variable only now it returns NaN. If I remove the art from the equation it works fine. My coresTest is defined in an input:

var coresTest = document.getElementById('coresintest').value;

The error I get is that my function is working and not outputting anything. My entire source code for the page is.

<html>
<head>
<script>

function functionCalc() {

    // Variables
    var conMin = document.getElementById('cMin').value;
    var serLev = document.getElementById('sLev').value;
    var noFrames = 1800;
    var noFramesTot = noFrames*24;
    var coresTest = document.getElementById('coresintest').value;
    var estCoreHours = 200;
    var art = document.getElementById('art');
    var coreHrs = parseInt(noFrames) * parseInt(coresTest) * parseInt(art);

    // Hours Minutes Seconds variables
    var avgframerndrtme = document.getElementById('avgrndrtime').value;
    var secfunc = avgframerndrtme/3600;
    var secmin = avgframerndrtme/60;
    var hourfunc = avgframerndrtme/开发者_开发知识库1;
    var conMin = document.getElementById('cMin').value;
    var art_value = art.options[art.selectedIndex].value;
    var switchart = document.getElementById('switchart').value;

    // Workout if Average render time is in minutes seconds etc...
    switch(art_value)
    {
        case "minutes":
            document.getElementById("switchart").value=secmin.toFixed(3);
            break;
        case "seconds":
            document.getElementById("switchart").value=secfunc.toFixed(3);
            break;
        case "hours":
            document.getElementById("switchart").value=hourfunc;
            break;
    }

    var total = coreHrs * serLev;

    document.getElementById("estDiv").innerHTML=total;
    document.getElementById("corehours").innerHTML=coreHrs;
}
</script>
</head>
<body>
    <h1>Content/SLA</h1>
    corehours: 
    <input type='text' id='cHours' onKeyUp="functionCalc()" /><br />
    content minutes:
    <input type='text' id='cMin' onKeyUp="functionCalc()" /><br />

    Service level: 
    <select onBlur="functionCalc()" onClick="functionCalc()" id="sLev">
        <option value="0.84" id="mega">Priority Mega</option>
        <option value="0.67" id="urgent">Priority Urgent</option>
        <option value="0.56" id="standard">Standard Job</option>
        <option value="0.28" id="scheduled">Scheduled Job</option>
        <option value="0.14" id="lightpass">Light Pass Job</option>
    </select><br />

    number of frames (Optional): 
    <input type='text' id='noFrames' value="1800" /><br />
    ---------------------------------------------------------------------------------
    <br />

    <h1>render time</h1>

    <!-- avg frame render hours:
        <input type='text' id='renHours' onKeyUp="functionCalc()" /><br /> -->
    average render time:
    <input  type='text' id='avgrndrtime' onKeyUp="functionCalc()" onBlur="functionCalc()" /> 

    <select onChange="functionCalc()" onBlur="functionCalc()" id="art">
        <option value="hours" id="hours">Hours</option>
        <option value="minutes" id="mins">Minutes</option>
        <option value="seconds" id="secs">Seconds</option>
    </select><br />
    cores in test :<input type='text' id='coresintest' onKeyUp="functionCalc()" />
    <br /><br />
    ---------------------------------------------------------------------------------<br />

    <h1>Estimate </h1>

    estimated Total : <div id="estDiv"></div><br>
    estimated core hours : <div id="corehours"></div>

    <br><br><br><br><br><br><br><br><br><br><br><br>AVERAGE FRAME RENDER TIME  
    <input type='text' id='switchart' onKeyUp="functionCalc()" />
    <br />
</body>
</html>

Your first code snippet and the second one don't match. I can only assume the second one is supposed to be the "real" one and the first one was hastily "fixed" for the question, thus introducing some mistakes.

Your art field does not contain a numerical value. That's (partly) where your problem is. If you hard code it, it would be fine, but in your markup it is a combo box with string values for "hours", "minutes" and "seconds", not a numerical value (see full code below to see how to provide numerical values while using text labels for the options).

Also, you write:

var art = document.getElementById('art');

It should be:

var art = document.getElementById('art').value;

Here's something that would work, though producing something completely non-sensical:

<html>
  <head>
    <script>
      function functionCalc() {

        // Variables
        var noFrames  = document.getElementById('noFrames').value;
        var coresTest = document.getElementById('coresintest').value;
        var art       = document.getElementById('art').value;
        var coreHrs   = parseInt(noFrames, 10) * parseInt(coresTest, 10) * parseInt(art, 10);

        document.getElementById("cHours").value = coreHrs;
      }
    </script>
  </head>

  <body>
    corehours: <input type='text' id='cHours' /><br />
    number of frames (Optional): <input type='text' id='noFrames' value="1800" /><br />
    <select id="art">
      <option value="5" id="hours">Hours</option>
      <option value="10" id="mins">Minutes</option>
      <option value="100" id="secs">Seconds</option>
    </select>
    <br />
    cores in test :<input type='text' id='coresintest' />
    <br />    
    <button id='coresintest' onclick="functionCalc()">calc</button>
  </body>
</html>

I repeat, this is non-sensical as I have no idea what you are trying to achieve.

Also, be careful with your variable and field names and ids. You have a cHours and a corehours, so it's a bit confusing with regard to the intent of each field. Try also not too mix XML and HTMl syntax (there are closing and non-closing <br /> tags in your code), though it has nothing to do with your issue, it's not really a good practice. Pick one and stick to it.

Do pay attention to the parseInt functions as well (assuming you do want integer values), and the fact that it requires a radix (the second parameter). Ir you need float values, use the equivalent parseFloat (which doesn't use a radix).

Finally, you mentioned in a comment that "Its just not executing [your] script". You are registering onBlur events, which means you need to do an action that triggers an onblur (like tabing through fields to leave them). Maybe you didn't do this.

try