...

View Full Version : .innerHTML and document.GetElementById



X888X
01-09-2012, 05:37 AM
I need help creating something hard.

First I need to divs that change by ONE button and when they change they say two different things and must be onclick.

The other thing is there will be 4 buttons. They start black and when you click one it turns grey and when you click another it turns gray and the other one that was last clicked turns back black and same with the other two.

sunfighter
01-09-2012, 04:49 PM
This is how to do the second question. It uses the javascript you named the question after
.innerHTML and document.GetElementById and a static variable. If you need to change it, you should be able to. Also this should show you how to do the first question by yourself.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New document</title>
<meta name="generator" content="TSW WebCoder 2010" />

<script type="text/javascript">
thecount = 0;
function big(ident)
{
document.getElementById(ident).style.backgroundColor = 'gray';
++thecount;
if(thecount>2)
{
document.getElementById('but_1').style.backgroundColor = 'black';
document.getElementById('but_2').style.backgroundColor = 'black';
document.getElementById('but_3').style.backgroundColor = 'black';
document.getElementById('but_4').style.backgroundColor = 'black';
thecount = 0;
}
document.getElementById('here').innerHTML = thecount;
}
</script>

</head>
<body>
<input type="button" value="color change" id="but_1" style="background-color:black;color:white;" onclick="big('but_1');" />
<input type="button" value="color change" id="but_2" style="background-color:black;color:white;" onclick="big('but_2');" />
<input type="button" value="color change" id="but_3" style="background-color:black;color:white;" onclick="big('but_3');" />
<input type="button" value="color change" id="but_4" style="background-color:black;color:white;" onclick="big('but_4');" />
<div id="here">numbers</div>
</body>
</html>

X888X
01-09-2012, 05:21 PM
Close not not it please try to make it better

X888X
01-09-2012, 05:22 PM
Look at the code yourself. http://scnse.tk/owen

sunfighter
01-09-2012, 05:24 PM
You try to make it better. If you can't fix it to the way you want it, I'd drop the class.

X888X
01-09-2012, 05:27 PM
I can't find a way to make it better first remove the numbers thing.

X888X
01-09-2012, 05:30 PM
The number thing is the main thing that I don't want/like.

sunfighter
01-09-2012, 08:52 PM
X888X the number thing was put there to show you what you need to know about your first question. I change the contents of a div:

<div id="here">numbers</div>By using a function the uses innerHTML:

document.getElementById('here').innerHTML = thecount;

They are not needed for #2 but should be helpful to answer #1.

So without them:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New document</title>
<meta name="generator" content="TSW WebCoder 2010" />

<script type="text/javascript">
thecount = 0;
function big(ident)
{
document.getElementById(ident).style.backgroundColor = 'gray';
++thecount;
if(thecount>2)
{
document.getElementById('but_1').style.backgroundColor = 'black';
document.getElementById('but_2').style.backgroundColor = 'black';
document.getElementById('but_3').style.backgroundColor = 'black';
document.getElementById('but_4').style.backgroundColor = 'black';
thecount = 0;
}
}
</script>

</head>
<body>
<input type="button" value="color change" id="but_1" style="background-color:black;color:white;" onclick="big('but_1');" />
<input type="button" value="color change" id="but_2" style="background-color:black;color:white;" onclick="big('but_2');" />
<input type="button" value="color change" id="but_3" style="background-color:black;color:white;" onclick="big('but_3');" />
<input type="button" value="color change" id="but_4" style="background-color:black;color:white;" onclick="big('but_4');" />
</body>
</html>
It also showed you what thecount variable was doing.

Kevin_M_Schafer
01-09-2012, 10:36 PM
Hi sunfighter,

Pretty cool! It reminds me of the buttons on the old oscillating fan at my grandparents house.

What could a person do with something like this?

--Kevin

.

X888X
01-10-2012, 01:21 AM
Its a big update for my website homepage. and Star I'm confused with this programming, could you maybe edit it for me?

sunfighter
01-10-2012, 01:53 AM
Its a big update for my website homepage. and Star I'm confused with this programming, could you maybe edit it for me?

Edit it for what? It does what you want. Click a black button it goes gray. Do it again to any button and that turns gray. But click a third button and they all go back to black. That's what you wanted. Or is it?

Did you want this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New document</title>
<meta name="generator" content="TSW WebCoder 2010" />

<script type="text/javascript">
function big(ident)
{
document.getElementById('but_1').style.backgroundColor = 'black';
document.getElementById('but_2').style.backgroundColor = 'black';
document.getElementById('but_3').style.backgroundColor = 'black';
document.getElementById('but_4').style.backgroundColor = 'black';
document.getElementById(ident).style.backgroundColor = 'gray';
}
</script>

</head>
<body>
<input type="button" value="color change" id="but_1" style="background-color:black;color:white;" onclick="big('but_1');" />
<input type="button" value="color change" id="but_2" style="background-color:black;color:white;" onclick="big('but_2');" />
<input type="button" value="color change" id="but_3" style="background-color:black;color:white;" onclick="big('but_3');" />
<input type="button" value="color change" id="but_4" style="background-color:black;color:white;" onclick="big('but_4');" />
</body>
</html>

Kevin I feel like I'm being shoved through that fan. :)

X888X
01-10-2012, 02:28 AM
Please show me a expamle of the code on your site or something as I'm on a mobile device right now..

X888X
01-10-2012, 09:12 PM
Yes like that. Now, can you add to divs that say something that you can make it say

sunfighter
01-11-2012, 04:40 AM
Email sent... Does this help:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<input type="button" id="button1" value="change div" style="background-color:black;color:white;" onclick="document.getElementById('here').innerHTML = 'Hello<br />I love you<br />wont you tell me your name?';" />
<div id="here">numbers</div>
</body>
</html>

X888X
01-11-2012, 10:43 PM
Ok now how to make it work for the 4 buttons I got? Here the code I got so far.





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>New document</title>
<meta name="generator" content="TSW WebCoder 2010" />

<script type="text/javascript">
function big(ident)
{
document.getElementById('but_1').style.backgroundColor = 'black';
document.getElementById('but_2').style.backgroundColor = 'black';
document.getElementById('but_3').style.backgroundColor = 'black';
document.getElementById('but_4').style.backgroundColor = 'black';
document.getElementById(ident).style.backgroundColor = 'gray';
}
</script>

</head>
<body>
<input type="button" value="color change" id="but_1" style="background-color:black;color:white;" onclick="big('but_1');" />
<input type="button" value="color change" id="but_2" style="background-color:black;color:white;" onclick="big('but_2');" />
<input type="button" value="color change" id="but_3" style="background-color:black;color:white;" onclick="big('but_3');" />
<input type="button" value="color change" id="but_4" style="background-color:black;color:white;" onclick="big('but_4');" />
</body>
</html>




<input type="button" id="but_1" value="change div" style="background-color:black;color:white;" onclick="document.getElementById('here').innerHTML = 'Hello<br />I love you<br />wont you tell me your name?';" />
<div id="here">numbers</div>

X888X
01-11-2012, 10:50 PM
Hey! never mind. I messed with it and now it works thanks to you thanks.

X888X
01-11-2012, 11:20 PM
Oh one more thing can you turn the button you click in to text/html instead of input buttons please? Here's the code to edit from.


<div id="Information">Please click a button to see Information.</div>


<script type="text/javascript">
function big(ident)
{
document.getElementById('but_1').style.backgroundColor = 'red';
document.getElementById('but_2').style.backgroundColor = 'red';
document.getElementById('but_3').style.backgroundColor = 'red';
document.getElementById('but_4').style.backgroundColor = 'red';
document.getElementById(ident).style.backgroundColor = 'pink';
}
</script>

</head>
<body>
<input type="button" value="My Statistics" id="but_1" style="background-color:red;color:black;" onclick="big('but_1'); document.getElementById('Show').innerHTML = 'My Statistics'; document.getElementById('Information').innerHTML = 'Ever wanted to know what you have been doing? Well now you can with My Statistics';" />
<input type="button" value="Applications" id="but_2" style="background-color:red;color:black;" onclick="big('but_2'); document.getElementById('Show').innerHTML = 'Applications'; document.getElementById('Information').innerHTML = 'Wanna see Applications made by users and the website? Well now you can.';" />
<input type="button" value="Games" id="but_3" style="background-color:red;color:black;" onclick="big('but_3'); document.getElementById('Show').innerHTML = 'Games'; document.getElementById('Information').innerHTML = 'Can not go to the arcade? do not worry we have lots of games.';" />
<input type="button" value="Shortcuts" id="but_4" style="background-color:red;color:black;" onclick="big('but_4'); document.getElementById('Show').innerHTML = 'Shortcuts'; document.getElementById('Information').innerHTML = 'Here you can put Shortcuts to areas you love.';" />
</body>
</html>





<div id="Show">Hello, this is under construction</div>

sunfighter
01-12-2012, 02:10 AM
Clean up the button code by adding css and moved the inline js to the function.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
#but_1, #but_2, #but_3, #but_4
{
background-color:red;
color:black;
}
</style>
<script type="text/javascript">
function big(ident)
{
document.getElementById('but_1').style.backgroundColor = 'red';
document.getElementById('but_2').style.backgroundColor = 'red';
document.getElementById('but_3').style.backgroundColor = 'red';
document.getElementById('but_4').style.backgroundColor = 'red';
document.getElementById(ident).style.backgroundColor = 'pink';
whom = Number(ident.charAt(4));
switch(whom)
{
case 1:
document.getElementById('Show').innerHTML = 'My Statistics';
document.getElementById('Information').innerHTML = 'Ever wanted to know what you have been doing? Well now you can with My Statistics';
break;
case 2:
document.getElementById('Show').innerHTML = 'Applications';
document.getElementById('Information').innerHTML = 'Wanna see Applications made by users and the website? Well now you can.';
break;
case 3:
document.getElementById('Show').innerHTML = 'Games';
document.getElementById('Information').innerHTML = 'Can not go to the arcade? do not worry we have lots of games.';
break;
case 4:
document.getElementById('Show').innerHTML = 'Shortcuts';
document.getElementById('Information').innerHTML = 'Here you can put Shortcuts to areas you love.'
break;
}
}
</script>
</head>

<body>
<div id="Information">Please click a button to see Information.</div>
<button type="button" id="but_1" onclick="big('but_1');">My Statistics</button>
<button type="button" id="but_2" onclick="big('but_2');;">Applications</button>
<button type="button" id="but_3" onclick="big('but_3');">Games</button>
<button type="button" id="but_4" onclick="big('but_4');">Shortcuts</button>
<div id="Show">Hello, this is under construction</div>
</body>
</html>

X888X
01-12-2012, 02:15 AM
Um its still like a button

sunfighter
01-12-2012, 03:46 PM
OK, bad interpretation on my part. just change body to

<body>
<div id="Information">Please click a button to see Information.</div>
<a id="but_1" href="javascript:big('but_1')">My Statistics</a>
<a id="but_2" href="javascript:big('but_2')">Applications</a>
<a id="but_3" href="javascript:big('but_3')">Games</a>
<a id="but_4" href="javascript:big('but_4')">Shortcuts</a>
<div id="Show">Hello, this is under construction</div>
</body>
</html>

felgall
01-12-2012, 08:33 PM
OK, bad interpretation on my part. just change body to

<body>
<div id="Information">Please click a button to see Information.</div>
<a id="but_1" href="javascript:big('but_1')">My Statistics</a>
<a id="but_2" href="javascript:big('but_2')">Applications</a>
<a id="but_3" href="javascript:big('but_3')">Games</a>
<a id="but_4" href="javascript:big('but_4')">Shortcuts</a>
<div id="Show">Hello, this is under construction</div>
</body>
</html>

href="javascript: will not always work and should NEVER be used as it breaks the page for everyone who doesn't have JavaScript. The href should point to where ever you want those without JavaScript to go - and if you want them to stay put with the link doing nothing then you need href="#here" id="here" - the JavaScript can be attached using an event handler such as onclick (from within the JavaScript using document.getElementById('here').onclick = but is better added using an event listener so that it will not interfere with any other script you add to the page that also wishes to attach JavaScript to that same element.

(you can substitute any valid id where I put "here" in the above examples as long as it isn't used elsewhere in the page).

X888X
01-13-2012, 03:58 AM
Um... I messed with it and changed <button ...> to <div ...> and </button> to </div> and that worked so I'm good. And guys if you ever nee help contact "sunfighter" he's a great coder and helped my make this great code. Thank you sunfighter.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum