...

View Full Version : javascript rookie project | please help



SeattleMicah
06-22-2012, 11:32 PM
Hey all can you please help me get started with this simple scenario.

Thanks

http://img194.imageshack.us/img194/3842/javascriptproject.png (http://imageshack.us/photo/my-images/194/javascriptproject.png/)

felgall
06-23-2012, 12:22 AM
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.

Old Pedant
06-23-2012, 01:43 AM
And WHERE is the sum of the two values supposed to appear, by the by??

SeattleMicah
06-23-2012, 05:18 AM
ill come back with an update I know this should be easy

the current updates

SeattleMicah
06-23-2012, 08:11 PM
<!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.

SeattleMicah
06-23-2012, 08:48 PM
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.


var newScorePara = document.createElement("p");

var valueText = document.createTextNode("100,000");

newScorePara.appendChild(valueText);

document.getElementById("currentscore").appendChild(newScorePara);

SeattleMicah
06-25-2012, 12:57 AM
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.


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);
}

Old Pedant
06-25-2012, 02:08 AM
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??

SeattleMicah
06-25-2012, 04:45 AM
thanks pedant.

something like this?



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

Old Pedant
06-25-2012, 07:19 AM
No.



function storeValue(){
var currentScore = document.getElementById("currentscore");
var valueInput = document.getElementById("value").value;
currentScore.innerHTML = valueInput
}

Or, even more simply,


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.

SeattleMicah
06-25-2012, 05:33 PM
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.

SeattleMicah
06-27-2012, 08:55 PM
update:


<!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>



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();
}

SeattleMicah
06-27-2012, 09:00 PM
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?

Old Pedant
06-27-2012, 09:35 PM
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).

SeattleMicah
06-27-2012, 09:50 PM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum