Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Uploading to HTML

    I'm not an expert on Javascripting, only started a few days ago, although have previous scripting experience. I'm currently having difficulties uploading information from the Javascript back to the HTML page.

    I'm using the latest version of Chrome, on a Linux distro.

    I'm basically making this script just to get more familiar with Javascripting. Here is the HTML.

    Code:
    <html>
    	<head>
    		<script src="world.js" >
    		</script>
    	</head>
    	<body>
    	<p>
    		Current Statistics</br>
    		Strength =<input type="text" id="strStat" value="3" size="2" readonly></br>
    		Archery =<input type="text" id="arcStat" value="3" size="2" readonly></br>
    		Magic =<input type="text" id="magStat" value="3" size="2" readonly></br>
    		Health =<input type="text" id="heaStat" value="20" size="3" readonly></br>
    	</p>
    		<input type="button" onclick="battle()" value="Battle!">
    	</body>
    </html>
    Here is the snippet of code, where it says it fails on the Javascript Console in Chrome, and where the variable is made.

    Code:
    //Calculate the battle.
    	var battling = true;
    	while (battling) {
    		if (oppHealth <= 0){
    			alert("Congratulations on defeating your opponent");
    			battling = false;
    			var userExp = userValue + Math.random() * 2;
    		}
    		else if (userHealth <= 0) {
    			alert("You were no match for that level of an opponent");
    			battling = false;
    			var userExp = userValue + Math.random();
    		}
    		else {
    			oppHealth = oppHealth - userAttack;
    			userHealth = userHealth - oppAttack;
    		} 
    	}
    	
    	//Add the experience to the users value
    	if (typeAtt === "1"){
    		document.getElementById('strStat').value = userExp;
    		alert("Your Strength stat has now increased to" + " " + userExp);
    	}
    	else if (typeAtt === "2"){
    		document.getElementById('arcStat').value = userExp;
    		alert("Your Archery stat has now increased to" + " " + userExp);
    	}
    	else if (typeAtt === "3"){
    		document.getElementById('magStat').value = userExp;
    		alert("Your Magic stat has now increased to" + " " + userExp);
        }
    }
    The error I get on the debugger is: "Uncaught TypeError: Cannot set property 'value' of null world.js:64"

    Which is the second line of code:
    Code:
    if (typeAtt === "1"){
    		document.getElementById('strStat').value = userExp;
    Much Thanks!

  • #2
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    By just looking at my script, I already found two errors. Although none of which solve the initial problem.

    1. I should/need to declare its a javascript script in the script area.
    2. No else, in the if/else statement.

  • #3
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    What would the attribte "readonly" for each of the input elements tell you?

  • #4
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    What would the attribte "readonly" for each of the input elements tell you?
    I don't want the user to change it, I do want the script to change it.

    I had the script working but it would add the "userExp" to the end of the original value.

    For instance. Original value is 3. it would add 0.123456789 to the end of the previous value, resulting in 30.123456789 (when it should be 3.123456789). If you would run the script a second time, use the same stat. The value would change to 30.1234567890.123456789. So therefore while fixing that problem, I ran into this one.

    Again, just started learning javascript. Is there a better way to do the above?

  • #5
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    "+" is concatenation, in JavaScript. If you mean to add numeric values, use Number().
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    So what is typeapp? What is userValue? What is oppHealth etc?

    You are only showing half of the code ...

    The concatentation of values (instead of mathematical addition) comes from the type of operands. If the type of the first operand of "+" is a string, it will concatenate the second operand to the string.

    Solution: Convert the first operand to a number first, and then use the "+" operator with the number as first operand

    Code:
    var mynumber = Number(userValue);
    userExp = mynumber + Math.random() * 2;

  • Users who have thanked devnull69 for this post:

    IncrediBull (03-21-2013)

  • #7
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here is the entire code as requested. Mind you it's terrible and don't think of this as a game, more so something to keep me interested as I learn this language.

    Code:
    //Script that simulates the "world"
    
    
    
    function battle() {
    	confirm("You have chosen to go into battle.");
    	
    	//Calculate the opponents values.
    	var oppLevel = prompt("What level of an opponent would you like to face");
    	var oppRandom = Math.random();
    	var oppHealth = oppLevel * 20;
    	var oppAttack = oppLevel * oppRandom;
    	alert("Your opponent is attacking with a value of"+ " " + oppAttack);
    	
    	//Calculate which type of attack to use.
    	var typeAtt = prompt("What type of offense would you like to use? (1)Strength, (2)Archery, (3)Magic");
    	if (typeAtt === "1"){
    		var element = document.getElementById("strStat");
    		var userValue = element.value;
    		alert("Your Strength power is" + " " + userValue)
    	}
    	else if (typeAtt === "2"){
    		var element = document.getElementById("arcStat");
    		var userValue = element.value;
    		alert("Your Archery power is" + " " + userValue)
    	}
    	else if (typeAtt === "3"){
    		var element = document.getElementById("magStat");
    		var userValue = element.value;
    		alert("Your Magic power is" + " " + userValue)
    	}
    	else {
    		alert("Improper value entered!");
    	}
    	
    	//Calculate the users attack and health.
    	var healthElement = document.getElementById("heaStat");
    	var userHealth = healthElement.value;
    	var userRandom = Math.random();
    	var userAttack = userValue * userRandom;
    	alert("Because of the elements, your attack power has increased to" + " " + userAttack);
    	
    	//Calculate the battle.
    	var battling = true;
    	while (battling) {
    		if (oppHealth <= 0){
    			alert("Congratulations on defeating your opponent");
    			battling = false;
    			var userExp = userValue + Math.random() * 2;
    		}
    		else if (userHealth <= 0) {
    			alert("You were no match for that level of an opponent");
    			battling = false;
    			var userExp = userValue + Math.random();
    		}
    		else {
    			oppHealth = oppHealth - userAttack;
    			userHealth = userHealth - oppAttack;
    		} 
    	}
    	
    	//Add the experience to the users value
    	if (typeAtt === "1"){
    		document.getElementById('strStat').value = userExp;
    		alert("Your Strength stat has now increased to" + " " + userExp);
    	}
    	else if (typeAtt === "2"){
    		document.getElementById('arcStat').value = userExp;
    		alert("Your Archery stat has now increased to" + " " + userExp);
    	}
    	else if (typeAtt === "3"){
    		document.getElementById('magStat').value = userExp;
    		alert("Your Magic stat has now increased to" + " " + userExp);
        }
        
    }

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    Quote Originally Posted by IncrediBull View Post
    Here is the entire code as requested. Mind you it's terrible and don't think of this as a game, more so something to keep me interested as I learn this language.

    Code:
    //Script that simulates the "world"
    ...
    That may be all the JS, but it is not all the code.
    JS interacts with the HTML to complete the program.
    Supply any HTML along with JS when requesting help so program can be tested for errors.

  • #9
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    That may be all the JS, but it is not all the code.
    JS interacts with the HTML to complete the program.
    Supply any HTML along with JS when requesting help so program can be tested for errors.
    All the HTML was already supplied in the original post...

  • #10
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by devnull69 View Post
    So what is typeapp? What is userValue? What is oppHealth etc?

    You are only showing half of the code ...

    The concatentation of values (instead of mathematical addition) comes from the type of operands. If the type of the first operand of "+" is a string, it will concatenate the second operand to the string.

    Solution: Convert the first operand to a number first, and then use the "+" operator with the number as first operand

    Code:
    var mynumber = Number(userValue);
    userExp = mynumber + Math.random() * 2;
    Under this solution I changed two parts to my code.

    The first:
    [code]var userValue = element.value;
    Code:
     
    changed to:
    [codevar userValue = number(element.value);
    This made the program unable to function properly. Failed by saying "number is not defined." I removed the changes and tried changing another part which was:

    Code:
    var userExp = userValue + Math.random();
    Changed to:
    Code:
    var userExp = number(userValue + Math.random());

    Which works properly when uploading to the HTML, but the addition is again off, and it loads 3 + 0.123(example) as 30.123 instead of 3.123.

    When you changed the last code to:
    Code:
    var userExp = number(userValue) + Math.random();
    Again number is not defined. I must be doing something wrong in the addition area, but I can't see how to change it.

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts
    The function is Number(userValue),
    not number(userValue)

    JS is case sensitive.

  • #12
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    The function is Number(userValue),
    not number(userValue)

    JS is case sensitive.
    Thanks, very much. Problem solved.

  • #13
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts

    Unhappy

    Quote Originally Posted by jmrker View Post
    The function is Number(userValue),
    not number(userValue)

    JS is case sensitive.
    Quote Originally Posted by IncrediBull View Post
    Thanks, very much. Problem solved.
    Sorry.. I should have indicated as much when I suggested Number().
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".


  •  

    Posting Permissions

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