Problem Inserting html into element by javascript

Hi!

I’m trying to make a script (i’m a bit of a JS newb) which is called every time a change is made to an input box and will show an image either a tick/check or a cross depending on whether the values of two total boxes match. The script looks right to me but the image doesn’t show. Can somebody perhaps look through it and let me know where I’m going wrong?

Cheers!


<?php include 'includes/config.inc.php'; ?>
<html>
<head>
    <link href="includes/accounts.css" type="text/css" rel="stylesheet" />
    <script>
    <!-- FORCE TWO DECIMAL PLACES TO CURRENCY -->
    function dp(price) {
        string = "" + price;
        number = string.length - string.indexOf('.');
        if (string.indexOf('.') == -1)
            return string + '.00';
        if (number == 1)
            return string + '00';
        if (number == 2)
            return string + '0';
        if (number > 3)
            return string.substring(0,string.length-number+3);
            return string;
    }

    <!-- ADD TOGETHER FIRST 5 FIELDS AND DISPLAY TOTAL IN TOTAL1 -->
    function calculate1() {
        document.addTakings.total1.value =
            dp(((document.addTakings.nettax1.value * 100) +
                (document.addTakings.nettax2.value * 100) +
                (document.addTakings.nettax3.value * 100) +
                (document.addTakings.tax1.value * 100) +
                (document.addTakings.tax2.value * 100)) / 100)
        ;
    }
    <!-- ADD TOGETHER LAST 3 FIELDS AND DISPLAY TOTAL IN TOTAL2 -->
    function calculate2() {
        document.addTakings.total2.value =
            dp(((document.addTakings.cash.value * 100) +
                (document.addTakings.cheque.value * 100) +
                (document.addTakings.card.value * 100)) / 100)
        ;
    }
    
    <!-- CHECK TO SEE IF TOTAL1 AND TOTAL 2 MATCH AND SHOW IMAGE TO SUIT-->
    function match() {
        if (document.addTakings.total1.value == document.addTakings.total2.value) {
            document.getElementById('thebox').innerHMTL    = 'TICK/CHECK IMAGE WILL BE HERE';        
        } else {
            document.getElementById('thebox').innerHMTL    = 'CROSS IMAGE WILL BE HERE';        
        }
    }
    </script>
    
</head>
<body onload="calculate1;calculate2;match">
    <h1>Add Daily Takings</h1>
    <form name="addTakings" id="addTakings" class="fields" enctype="mulipart/form-data" method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>">
        <fieldset>
            <legend>Daily Takings</em></legend>
            <ol>
                <li>
                    <label for="nettax">NET TAX1</label>
                     &pound; <input id="nettax1" name="nettax1" size="4" class="required number currency" onkeyup="calculate1();match()" />
                </li>
                <li>
                    <label for="nettax2">NET TAX2</label>
                    &pound; <input id="nettax2" name="nettax2" size="4" class="required number currency" onkeyup="calculate1();match()" />
                </li>
                <li>
                    <label for="nettax3">NET TAX3</label>
                    &pound; <input id="nettax3" name="nettax3" size="4" class="required number currency" onkeyup="calculate1();match()" />
                </li>
                <li>
                    <label for="tax1">TAX1</label>
                    &pound; <input id="tax1" name="tax1" size="4" class="required number currency" onkeyup="calculate1();match()" />
                </li>
                <li>
                    <label for="tax2">TAX2</label>
                    &pound; <input id="tax2" name="tax2" size="4" class="required number currency" onkeyup="calculate1();match()" />
                </li>
                <li>
                    <label for="cash">CASH SALES</label>
                    &pound; <input id="cash" name="cash" size="4" class="required number currency" onkeyup="calculate2();match()" />
                </li>
                <li>
                    <label for="cheque">CHEQUE SALES</label>
                    &pound; <input id="cheque" name="cheque" size="4" class="required number currency" onkeyup="calculate2();match()" />
                </li>
                <li>
                    <label for="card">CARD SALES</label>
                    &pound; <input id="card" name="card" size="4" class="required number currency" onkeyup="calculate2();match()" />
                </li>
            </ol>
        </fieldset>
        <input id="total1" name="total1" /><span id="thebox"></span>
        <input id="total2" name="total2" />
        <p><input name="submitTakings" type="submit" value="Submit Takings" /></p>
    </form>
</body>
</html>

Ha ha ha! What a numpty!

I should check my spelling next time. innerHMTL isn’t quick the same as innerHTML is it?!

Apolgoies ot aynone hwo’s watsed theri tiem readnig htis pots!

document.getElementById(‘thebox’).innerHMTL = ‘TICK/CHECK IMAGE WILL BE HERE’;
} else {
document.getElementById(‘thebox’).innerHMTL = ‘CROSS IMAGE WILL BE HERE’;

If that is your exact code then I’m not surprised you don’t see an IMAGE. :wink: