on click change css property

This site is best viewed in a modern browser with JavaScript enabled.

Luke_Fisher

Hello, I've only just started learning Javascript and the below code isn't working any pointers would be greatly appreciated;

I want to create and on click function which changes the .style.display = inline, as well as setting the other id's to display none.

$(document).ready(function() {

document.getElementById("one").style.display="none";
document.getElementById("two").style.display="none";
document.getElementById("three").style.display="none";

function myfunc()
{
if(id == top) {
document.getElementById("one").style.display="inline";
}
else if

(id == mid)
document.getElementById("two").style.display="inline";

else

(id == bottom)
document.getElementById("three").style.display="inline";
return true;

}
});

</script>

<body >

First Para

2nd Para

Third Para

Displayed 1st para

Displayed 2nd para

Displayed 3rd para

</body>

Thank you

Padonak

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>123</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<style type="text/css">
body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:32px;text-align:center;}
#one,#two,#three{display:none;}
</style>
<script type='text/javascript'>
$(document).ready(function() {
var refs=[
['top','one'],
['mid','two'],
['bot','three']
];

for(var i in refs){
$('#'+refs[i][0]).click(function(){
for(var j in refs){
var disp=(jQuery.inArray($(this).attr('id'), refs[j]) == 0)?'block':'none';
$('#'+refs[j][1]).css('display',disp);
}
});
}
});
</script>
</head>
<body>
<p id="top">First Para</p>
<p id="mid">2nd Para</p>
<p id="bot">Third Para</p>
<br />
<p id="one">Displayed 1st para</p>
<br />
<p id="two">Displayed 2nd para</p>
<br />
<p id="three">Displayed 3rd para</p>
</body>
</html>

Luke_Fisher

Thanks for the reply, could you please explain each line of code?

xelawho

<!DOCTYPE HTML>
<html>
<head>
<style>
#one,#two,#three{display:none}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<p class="one" >First Para</p>
<p class="two" >2nd Para</p>
<p class="three" >Third Para</p><br />

<p id="one">Displayed 1st para</p><br />
<p id="two">Displayed 2nd para</p><br />
<p id="three">Displayed 3rd para</p><br />
<script type="text/javascript">
$(document).ready(function() {
var shown; 
$("p").on("click", function (){
if (shown){shown.hide()}
var theone = $("#"+$(this).attr("class"));
theone.show();
shown=theone;
	});
});
</script>

</body>
</html>

Padonak

Luke Fisher;1275483 wrote:
Thanks for the reply, could you please explain each line of code?

that would be a too long story. you ask what is not clear and i'll try to explain.
btw, xelawho's code is much more elegant

Luke_Fisher

Thanks for both posts, ill use the 2nd one as advised from Padonak,

Could you please go through this part of the code.

if (shown){shown.hide()}
var theone = $("#"+$(this).attr("class"));
theone.show();
shown=theone;

Luke_Fisher

Trying to modify the code slightly so the button which has been clicked on (First Para) shows a different color

<script type="text/javascript">
 $(document).ready(function() {

 $("#one").hide();
 $("#two").hide();
 $("#three").hide();

 var shown;
 $("p").on("click", function () {
	 if(shown) {shown.hide()}
	 var theone = $("#" +$ (this).attr("class"));
	 theone.show();
	 shown = theone;
	 $("." + $(this).css("color" , "red"));

 });

 else {
	 $("." + $(this).css("color" , "black"));


 }

});

</script>

Any ideas?

xelawho

if (shown){shown.hide()} // if a div has been shown (which it won't have been the first time you click on something), hide it
var theone = $("#"+$(this).attr("class")); // get the class name from the <p> that you clicked on and use it to refer to the <p> you want to show (because it has the same id)
theone.show(); // show that <p>
shown=theone; // store the shown <p> in a variable so we know to hide it the next time the function is called

xelawho

changing colors you can apply the same logic. Remember that in this case, $(this) refers to the that was clicked on...

<script type="text/javascript">
$(document).ready(function() {
var shown; 
var clicked;
$("p").on("click", function (){
if (shown){
shown.hide()
clicked.css("color","black");
}
var theone = $("#"+$(this).attr("class"));
$(this).css("color","red");
theone.show();
clicked=$(this);
shown=theone;
	});
});
</script>

root

Using a framework is not proper Javascript coding.

Change

<p id="top" onclick="myfunc()">First Para</p>

<p id="mid" onclick="myfunc()">2nd Para</p>

<p id="bottom" onclick="myfunc()">Third Para</p><br />

<p id="top" onclick="myfunc(this.id)">First Para</p>

<p id="mid" onclick="myfunc(this.id)">2nd Para</p>

<p id="bottom" onclick="myfunc(this.id)">Third Para</p><br />

change myfunc to

function myfunc(x){
	switch( x ){
		case "top": document.getElementById("one").style.display="inline"; break;
		case "mid": document.getElementById("two").style.display="inline"; break;
		case "bottom": document.getElementById("three").style.display="inline"; break;
		}
}

so now when one of your elements is clicked, the id ref gets passed to the myfunc function and the particular element you want changed will be changed

xelawho

\\.\;1275617 wrote:
Using a framework is not proper Javascript coding.

what does that mean?

and if you're one of those guys, what are you doing using inline event handlers?

and what happened to the "hiding" part of Luke's request?

root

A frame work is JQuery, Prototype, MooTools, etc.

root

What do you mean hiding?

I proposed a different method, it is up to the OP to complete the job in any case.

xelawho

I know what a framework is - I was wondering what "proper" means in this context

root

Exactly what it means, not proper javascript programming.

Using a framework is not and never will be javascript programming.

xelawho

hmmm... not a very compelling argument, really. A framework is just a bunch of helper functions, written in javascript and loaded from an external file. Or are helper functions and external files "improper" too?

root

I know that but the fact remains that a framework is not javascript programming.

Padonak

so the symphony orchestra is not music in comparison with a guitar solo and blowjob is not sex compared with coition, right?

xelawho

Padonak;1275787 wrote:
blowjob is not sex compared with coition, right?

ha, ha. I think if you spend your time worrying about what is "real" javascript you probably shouldn't be fussy about the other

Padonak

in russian there exist the rude widly used word (a curse) which has many meanings depending on the context it is used. so, if you say 'i have [Present Perfect Simple of that word] with that code' everybody will understand how hard the work was )) the word is mostly equal to the english 'f*ck' ))))