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 15 of 15
  1. #1
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts

    javascript rookie project | please help

    Hey all can you please help me get started with this simple scenario.

    Thanks


  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Start by writing the HTML and CSS and validate that to make sure that it doesn't have any errors. Once you have that done then you can add the JavaScript.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,639 Times in 4,601 Posts
    And WHERE is the sum of the two values supposed to appear, by the by??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    ill come back with an update I know this should be easy

    the current updates

  • #5
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Score Board</title>
    
    <style>
    #player{width:300px;
    height:400px;
    }
    #currentscore{width:140px;
    height:50px;
    float:left;
    border-style:solid;
    border-width:1px;
    margin:0 5px 10px 0;
    }
    #value{width:140px;
    height:50px;
    float:left;
    margin:0 0 0 5px;
    }
    #update{width:300px;
    height:50px;
    float:left;
    clear:both;
    background-color:#000;
    }
    #update p{color:#fff;
    text-align:center;
    }
    #currentscore p{
    text-align:center;
    }
    .value{
    text-align:center;
    }
    
    
    </style>
    
    </head>
    <body>
    <div id="player">
    
    <div id="currentscore"></div>
    <div id="value"><input type="text" class="value" value="" style="width:140px; height:45px;"></div>
    <div id="update"><p>UPDATE</p></div>
    
    </div>
    <script src="myscript.js"></script> 
    </body>
    </html>
    working on some js, hopefully post something kind of productive later.
    Last edited by SeattleMicah; 06-23-2012 at 10:01 PM.

  • #6
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    One thing as a begginer, I don't really know where to start, so I just began by appending the text to the current score.

    Code:
    var newScorePara = document.createElement("p");
    
    var valueText = document.createTextNode("100,000");
    
    newScorePara.appendChild(valueText);
    
    document.getElementById("currentscore").appendChild(newScorePara);

  • #7
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    hey all

    I added a onclick function, to me it seems to make sense, just trying to set the value of the current score as the value of the input, but when I click, it responds as undefined....

    any help?

    I feel like I am writing too much, for something that is simple.

    Code:
    function storeValue(){
    var valueInput = document.getElementsByClassName( 'value' ).value;
    var valueText = document.createTextNode(valueInput);
    var newScorePara = document.createElement("p");
    newScorePara.appendChild(valueText);
    document.getElementById("currentscore").appendChild(newScorePara);
    }
    Last edited by SeattleMicah; 06-25-2012 at 02:02 AM.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,639 Times in 4,601 Posts
    getElementsByClassName returns an *ARRAY* of all the elements with that class name. (And, by the way, the function doesn't exist in MSIE prior to version 9.) Yes, even if there is only one element with that class.

    Better is to use document.getElementById( ) because (a) ID's must be unique on a page and (b) that function indeed only returns one element.

    And, yes, I think you are way way overdoing this.

    Why create a new element? Why not just start with an element with no content and put the result into it using innerHTML??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    thanks pedant.

    something like this?

    Code:
    var currentScore = document.getElementById("currentscore");
    var valueInput = document.getElementById("value").value;
    var valueText = document.createTextNode(valueInput); 
    
    function storeValue(){
    currentScore.innerHTML = (valueText);
    }
    well obviously not haha cause [object-text] is what shows up now
    Last edited by SeattleMicah; 06-25-2012 at 07:41 AM.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,639 Times in 4,601 Posts
    No.

    Code:
    function storeValue(){
        var currentScore = document.getElementById("currentscore");
        var valueInput = document.getElementById("value").value;
        currentScore.innerHTML = valueInput
    }
    Or, even more simply,
    Code:
    function storeValue(){
        document.getElementById("currentscore").innerHTML = 
                document.getElementById("value").value;
    }
    You know, it really would be worth your time to read a tutorial or two. Even the much-maligned w3schools.com tutorial would at least get you started.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    I am going through the lynda stuff, its just not clicking yet. Over thinking. I am going to try and add the math now. Thanks for your help.

  • #12
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    update:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Score Board</title>
    <link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
    <script src="myscript.js"></script> 
    <link href='style.css' rel='stylesheet' type='text/css'>
    </head>
    <body>
    <div id="player">
       <div id="currentscore"><p>Current Score</p><input type="text" id="scoreCard" style="width:140px; height:45px; margin:0 0 0 15px;"></div>
       <div id="valuecontainer"><p>Score for today</p><input type="text" id="value" style="width:140px; height:45px; margin:0 0 0 15px;"></div>
       <input type="button" value="UPDATE" onclick="updateValue()" id="update"/>
    </div>
    
    </body>
    </html>
    Code:
    function borderColorChange() {
    	if(parseInt(document.getElementById("scoreCard").value) < 0)
    	{
    		document.getElementById("currentscore").style.borderColor = "red";
    	} else {
    		document.getElementById("currentscore").style.borderColor = "green";
    }
    }
    
    
    
    function updateValue() {   
    	
        var temp = 0;
        if (document.getElementById("scoreCard").value == '') {
            temp = 0;
        } else {
            temp = parseInt(document.getElementById("scoreCard").value);
        }
    
        if (isNaN(document.getElementById("value").value)) {
    	
    	alert("Please enter in a +- number value");
    	
    	} else {
    
            var sum = parseInt(document.getElementById("value").value) + temp;             
            document.getElementById("scoreCard").value = sum;
        }
    	borderColorChange();
    }
    Last edited by SeattleMicah; 06-27-2012 at 10:02 PM.

  • #13
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    The next thing I am going to try and figure out is how to actually store the data, so that when various people are viewing the page, the numbers are logged and updated for use time and again.

    Do I need to visit the php forum for the next step?

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,639 Times in 4,601 Posts
    PHP or ASP or JSP or whatever. But server side code, certainly.

    I need to warn you that you are more than doubling the amount you need to learn, now.

    If, as would be best, you wanted to save information in a database, now you also need to learn the SQL language, in addition to PHP (or whatever).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    Thanks Old, I am aware that I am dipping into a new language (and maybe shouldn't) but I am trying to do this to better understand the relationship between the front and back ends.

    Maybe I should just mess around with another mini js project?


  •  

    Posting Permissions

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