SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Location
    California
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [help] Why Can't I Calculate and Insert into Span Tag?

    This is my first javascript program. I've been studying for a few days and thought I'd put it into practice.

    The problem is I'm trying to grab 2 numbers and multiply them. This will be a program to calculate percentage of something. I'm testing if two numbers can be multiplied and the output inserted into a span tag with id="total". When I hit calculate, it prints the total in span tag but quickly refreshes with default value over the total value.

    HTML
    Code:
        	<form method="get" action="">
        		<fieldset>
        			<legend>Find Percentage of a Number</legend>
    			    <ul>
    			    	<li>
    				    	<label for="base">Base:</label>
    				    	<input type="text" id="base" />
    				    </li>
    			    	<li>
    						<label for="percent">Percent:</label>
    						<input type="text" id="percent" />
    			    	</li>
    			    	<li>
    						<p><span id="total">Total?</span></p>
    			    	</li>
    			    	<li>
    						<input type="submit" id="submit" value="Caculate?" onclick="mainInit()" />
    			    	</li>
    			    </ul>
    		    </fieldset>
    		    <script type="text/javascript" src="mathshop.js"></script>
        	</form>
    JavaScript
    Code:
    function mainInit() {
    	if(document.getElementById) {
    		if(document.getElementById("submit").onclick) {
    			grabValues();
    		}
    	}
    	else {
    		alert("Sorry, your browser does not support JavaScript.");
    	}
    }
    
    function grabValues() {
    	var a = document.getElementById("base").value;
    	var b = document.getElementById("percent").value;
    	findTotal(a, b);
    }
    
    function findTotal(base, percent) {
    	var total = base * percent;
    	document.getElementById("total").innerHTML = total;
    
    }

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hey there,

    What's happening here is that your JavaScript code runs and executes correctly, but as soon as it does the <form> is submitted because you used <input type="submit">.

    If you want to stop this from happening you can use an <input type="button">

    I'll also remark that your mainInit()'s if statement probably doesn't need to be there. It's pretty safe to assume that document.getElementById() is available (unless you live in 1994 )

    It *is* however a good idea to test for features that are not available in all browsers, for example if your code made use of document.querySelectorAll() it would be a good idea to perform a test and run alternate code.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Location
    California
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. And it didn't have anything to do with javascript. I was looking over and over in the wrong place.


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
  •