www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Javascript Simple Mathematical Problem

  1. #1
    Join Date
    May 2014
    Posts
    8

    resolved [RESOLVED] Javascript Simple Mathematical Problem

    I have a script which reads the contents of an attached file and prints the number of words. I then wanted to add another field which does a simple mathematical calculation based on word count and displays below. However the calculation does not work.

    Code:
    <script type="text/javascript">
    		function loadDemo() {
    
    		WordCount.words("file_attach", function(words) {
            //document.getElementById("words").value = words;
            document.getElementById("words").innerText = words;
    		})};
    
    		var elt = document.getElementById("words");
    		var totalwords = elt.textContent;
    		
    
    		totalwords = parseInt(totalwords,10);
    
    		var totalprice = totalwords * 12;
    		
    
    		document.getElementById("tprice").innerText = totalprice;
    </script>
    Code:
    <label for="name"><span>Name</span>
    					<input type="text" name="name" id="name" placeholder="Enter Your Name" />
    					</label>
    					
    					<label for="email"><span>Email Address</span>
    					<input type="email" name="email" id="email" placeholder="Enter Your Email" />
    					</label>
    					
    					<label for="file"><span>Attachment</span>
    					<input type="file" name="file_attach" id="file_attach" />
    					</label>
    					
    					<label for="words"><span>No. of Words</span>
    					<span id="words"> </span>
    					<input readonly type="number" id="words"/>
    					</label> <br/>
    					
    					<label for="tprice"><span>Price</span>
    					<span id="tprice"> </span>
    					<input readonly id="tprice"/>
    					</label> <br/>
    
    					
    					<label for="message"><span>Message</span>
    					<textarea name="message" id="message" placeholder="Enter Your Name"></textarea>
    					</label>
    Above is the script and form where variables should be printed. Function is called using onLoad inside the body tag.
    I also found the following error inside chrome debug

    'Uncaught TypeError: Cannot read property 'textContent' of null'

    Any help would be great as this is the final thing stopping me from completing this site!

    Thanks!

  2. #2
    Join Date
    Mar 2009
    Posts
    495
    1. In your HTML you have both a SPAN element and an INPUT element with the same ID ("words"). Don't do that.
    Code:
    <span id="words"> </span>
    <input readonly type="number" id="words"/>
    2. Where is, and what is "WordCount.words" ?

    3. Although you may have your "loadDemo()" function called upon window.onload, the remainder of your script will fire (assuming its in the HEAD) immediately, probably before the DOM is loaded, in which case it won't work.

    4. Where you have
    Code:
    var totalwords = elt.textContent;
    this yields a string. You can't count the words in it by subjecting it to the 'parseInt' function. Although not perfect, because you can't assume that all words are separated by a space, you could do something like:

    Code:
    totalWords = totalWords.split(" "); //split into an array by spaces
    totalWords = totalWords.length;  //hopefully the number of words
    --There may be other things wrong with your code, but these are issues you should address.

  3. #3
    Join Date
    May 2014
    Posts
    8
    Thanks for the reply!

    I only had span and input because i was playing around with fixed etc! I have an external JS file which does the word count of attachment (WordCount). I took your snippet of code but it still gives me the

    'Uncaught TypeError: Cannot read property 'textContent' of null ' pointing at this line in script

    var totalwords = elt.textContent;

    I just dont understand how its returning null when the value has just been set in a span?

  4. #4
    Join Date
    May 2014
    Posts
    8
    Managed to fix it!

    Final script:

    Code:
    function loadDemo() {
    
    		WordCount.words("file_attach", function(words) {
            document.getElementById("words").innerText = words
    		
            document.getElementById("tprice").innerText = parseInt(document.getElementById("words").innerHTML,10)/500*12;
    		
    	
    		})};

  5. #5
    Join Date
    Mar 2009
    Posts
    495
    Managed to fix it!
    Good!!!
    Last edited by Tcobb; 05-30-2014 at 12:57 AM. Reason: OP fixed it.

  6. #6
    Join Date
    May 2014
    Posts
    905
    Two tips:
    1) avoid making extra calls to document.get_xxxxx methods when you already have an elements value.
    2) some formatting that makes sense would make it a LOT clearer what you are doing... particularly since your closes don't make any sense because of it, even in your 'fixed' post.

    Code:
    function loadDemo() {
    	WordCount.words('file_attach', function(words) {
    		document.getElementById("words").innerText = words;
    		document.getElementById("tprice").innerText = parseInt(words, 10) / 500 * 12;
    	});
    }
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles