CODEWITHSUNDEEP
javascripthtml
Glen Keybit
Glen Keybit

Reputation: 326

Javascript unexpected behaviour 2 problems (maths wrong & not showing plain result)

Help please, as you are going to be able to tell from the code I'm extremely amatur at javascript coding, I have however managed to put this together and I'm very close to getting it to function how I need with a couple of niggles I just can't iron out.

Code posted below but to replicate the problems I'm having do the following..

To replicate problem 1..

  1. go to https://www.keybit.co.uk/6sizecalc/stickersv2.php
  2. press the (show/hide calcs link at the bottom)
  3. enter some test numbers into the top boxes (width and height)
  4. (tab out of the input box) note that the number in step 10 of the calculations is wrong
  5. press the go button, and now note that the number in step 10 is now correct.

Why is it wrong at first??

Problem 2.. is that it's supposed to show the result of step 10 in plain text towards the top of the page but it never shows anything there at all!

The code..

<head>
<script type="text/javascript"><!--

function updatesum()
{
    if (+document.form.inputwidth.value > 1280) 
    {
        alert('Maximum width is 1280mm, please reduce');
    }
    else {
        updatesum2()
    }
}
function updatesum2()

{
    if (+document.form.inputwidth.value < 20) 
    {
        alert('Minimum width is 20mm, please increase');
    }
    else {
        updatesum5()
    }
}

function updatesum3()
{
    if (+document.form.inputheight.value > 685) 
    {
        alert('Maximum height is 685mm, please reduce');
    }
    else {
        updatesum4()
    }
}
function updatesum4()

{
    if (+document.form.inputheight.value < 20) 
    {
        alert('Minimum height is 20mm, please increase');
    }
    else {
        updatesum5()
    }
}

function updatesum5()
{
    if (+document.form.switchedstickeramount.value > +document.form.rawstickeramount.value) 
    {
        document.form.biggestresult.value = +document.form.switchedstickeramount.value;
    }
    else {
        document.form.biggestresult.value = +document.form.rawstickeramount.value;
    }
updatesum6()
}
function updatesum6()
{
document.form.neww.value = +document.form.inputwidth.value + +document.form.bleed.value;
document.form.newh.value = +document.form.inputheight.value + +document.form.bleed.value;
document.form.stickersupsheet.value = Math.floor(+document.form.nsheetw.value / +document.form.neww.value);
document.form.stickersacsheet.value = Math.floor(+document.form.nsheeth.value / +document.form.newh.value);
document.form.nsheetw.value = +document.form.sheetw.value - +document.form.sheetbleed.value;
document.form.nsheeth.value = +document.form.sheeth.value - +document.form.sheetbleed.value;
document.form.stickersupsheetsw.value = Math.floor(+document.form.nsheetw.value / +document.form.newh.value);
document.form.stickersacsheetsw.value = Math.floor(+document.form.nsheeth.value / +document.form.neww.value);
document.form.rawstickeramount.value = document.form.stickersupsheet.value * document.form.stickersacsheet.value;
document.form.switchedstickeramount.value = document.form.stickersupsheetsw.value * document.form.stickersacsheetsw.value;
document.form.resultraw.value = document.form.sheetarea.value / document.form.stickerarea.value;
updatesum7()    
}

function updatesum7()
{
    if (+document.form.switchedstickeramount.value > +document.form.rawstickeramount.value) 
    {
       document.getElementById("sywg").innerHTML = +document.form.switchedstickeramount.value;
    }
    else {
       document.getElementById("sywg").innerHTML = +document.form.rawstickeramount.value;
    }    
}


function ClearForm(){
    document.form.reset();
}

//---></script>
<link rel="shortcut icon" type="image/x-icon" href="images/calcicon.ico">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- iPad Setup -->
    <meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0,
    width=device-width, user-scalable=no">
    <script src="//code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>
</head>
<body  onload="ClearForm()">
<form name="form">
<div><b>Stickers Per <i>1300x700mm Sheet</i> Calculator.</b></div><br/>
<small>Enter dimensions for a single sticker<i> (mm)</i>:</small><br>
<small>WIDTH <small>(Max 1280 / Min 20)</small></small> &nbsp;&nbsp;&nbsp;<small>HEIGHT <small>(Max 685 / Min 20)</small></small><br />
<input name="inputwidth" id="inputwidth" onChange="updatesum()" class="form-field" type="number" max="1280" min="20" step="1" /> x <input name="inputheight" id="inputheight" onChange="updatesum3()" class="form-field" type="number" max="685" min="20" step="1" />mm <button type="button" class="submit-button"  onclick="updatesum3()">GO</button><br/>
<small><br>Amount of stickers you'll get..</small>
<br/>
<big><span id="sywg" name="resultplain"></span></big> Stickers <small><small>(Approx)</small></small>


<!---Calculations BOX START--->
 <span id="calcs" style="display:none; border: 1px solid #000000; padding:10px; margin-top:5px;">Calculations..<br />
<b><small><small><small>1) Individual sticker bleed +</small></small></small></b><input name="bleed" value="10" onChange="updatesum()" class="form-field" type="number" />mm <small><i>(Editable)</i></small>
 <hr>
 <b><small><small><small>2) New individual sticker size with bleed added =</small></small></small></b><input name="neww" readonly onChange="updatesum()" class="form-field" type="number" /> x <input name="newh" readonly onChange="updatesum()" class="form-field" type="number" />mm <small><i>(Read Only)</i></small>
 <hr>
  <b><small><small><small>3) Sheet Size =</small></small></small></b><input name="sheetw" value="1300" onChange="updatesum()" class="form-field" type="number" /> x <input name="sheeth" value="700" onChange="updatesum()" class="form-field" type="number" />mm  <small><i>(Editable)</i></small>
 <hr>
 <b><small><small><small>4) Outer sheet bleed =</small></small></small></b><input name="sheetbleed" value="5" onChange="updatesum()" class="form-field" type="number" />mm <small><i>(Editable)</i></small>
 <hr>
 <b><small><small><small>5) Sheet Size Minus Bleed =</small></small></small></b><input name="nsheetw" readonly onChange="updatesum()" class="form-field" type="number" /> x <input name="nsheeth" readonly onChange="updatesum()" class="form-field" type="number" />mm <small><i>(Read Only)</i></small>
 <hr>
 <b><small><small><small>6a) Amount of stickers that fit up the sheet </small></small><small><small><small>(rounded down to whole sticker)</small></small></small></small></small></small> =</b><input name="stickersupsheet" onChange="updatesum()" readonly class="form-field" type="number" /> <small><i>(Read Only)</i></small>
 <hr>
 <b><small><small><small>6b) Amount of stickers that fit across the sheet </small></small><small><small><small>(rounded down to whole sticker)</small></small></small></small></small></small> =</b><input name="stickersacsheet" onChange="updatesum()" readonly class="form-field" type="number" /> <small><i>(Read Only)</i></small>
 <hr>
  <b><small><small><small>7) Amount of stickers as user inputted =</small></small></small></b><input name="rawstickeramount" onChange="updatesum()" readonly class="form-field" type="number" /> <small><i>(Read Only)</i></small>
 <hr>
  <b><small><small><small>8a) Amount of stickers that fit up the sheet (if w&h switched)</small></small><small><small><small>(rounded down to whole sticker)</small></small></small></small></small></small> =</b><input name="stickersupsheetsw" onChange="updatesum()" readonly class="form-field" type="number" /> <small><i>(Read Only)</i></small>
 <hr>
   <b><small><small><small>8b) Amount of stickers that fit across the sheet (if w&h switched)</small></small><small><small><small>(rounded down to whole sticker)</small></small></small></small></small></small> =</b><input name="stickersacsheetsw" onChange="updatesum()" readonly class="form-field" type="number" /> <small><i>(Read Only)</i></small>
 <hr>
   <b><small><small><small>9) Amount of stickers if switch =</small></small></small></b><input name="switchedstickeramount" onChange="updatesum()" readonly class="form-field" type="number" /> <small><i>(Read Only)</i></small>
 <hr>
 <b><small><small><small>10) Check if portrait or landscape would give more stickers and show most =</small></small></small></b><input name="biggestresult" onChange="updatesum()" readonly class="form-field" type="number" /> <small><i>(Read Only)</i></small>
 <hr>
</span><!---Calculations SIZES BOX END--->
<div><br>
<button type="reset" class="submit-button"  value="Reset">Clear All</button><br><br></div>
<small><small><small><a href="#" onclick="toggle_visibility('calcs');">Show/Hide Calculations</a></small></small></small>
</form>


</body>

Upvotes: 0

Views: 35

Answers (1)

codebox
codebox

Reputation: 20254

If you open the Developer Tools window in your browser and check the Console window you will see one problem:

stickersv2.php:71 Uncaught TypeError: Cannot read property 'value' of undefined

it looks like you are referring to document.form.stickerarea.value but the browser is telling you it can't find document.form.stickerarea

I recommend you use the JavaScript debugger (also in Developer Tools) to figure out where the problem is in your calculations.

Upvotes: 1

Related Questions