SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot maffp's Avatar
    Join Date
    Jun 2005
    Location
    UK
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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!

    HTML Code:
    <?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>

  2. #2
    SitePoint Zealot maffp's Avatar
    Join Date
    Jun 2005
    Location
    UK
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  3. #3
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ian Anderson
    www.siteguru.co.uk


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •