Jump to content

add class to a function

jnf555

By jnf555
in JavaScript

Recommended Posts

jnf555 Member

jnf555

Posted
Posted

<script type="text/javascript">function showtext(href) { document.getElementById("anyid").innerHTML = dateofbooking; } { var dateofbooking = ("click here to see quiz info!!!").addClass('jnf'); /*this is the section i cant get right*/ } function hidetext(href) { document.getElementById("anyid").innerHTML = dateofbooking2; } { var dateofbooking2 = "Quiz<br>Night"; } </script> hi i am trying to add a class to my function but not sure how , anyone help pleasejnf555

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

umm.... your code doesn't really make any sense. if you properly format and indent it, it's kinda of all over the place 

function showtext(href) {  document.getElementById("anyid").innerHTML = dateofbooking;} {var dateofbooking = ("click here to see quiz info!!!").addClass('jnf');   /*this is the section i cant get right*/}		function hidetext(href){  document.getElementById("anyid").innerHTML = dateofbooking2;}	{var dateofbooking2 = "Quiz<br>Night";} </script>

what exactly is going on here?

var dateofbooking = ("click here to see quiz info!!!").addClass('jnf');   /*this is the section i cant get right*/

what are you trying to add the class to? if you are using jquery, then you can use addClasshttp://api.jquery.com/addClass/ if not, then you need to classNamehttps://developer.mo...ement.className edit: just re-reread your topic title. you can't add a class to a function, and on top of that, that's not how you define a function. I guess you just have to tell us what you're trying to do.

Link to comment
Share on other sites
jnf555 Member

jnf555

Posted
  • Author
Posted

it sounds like i've got it wrong, i have posted the whole section below, which alters the text when mouseover, i am trying to also alter the style. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript">function showtext(href) { document.getElementById("anyid").innerHTML = dateofbooking; } { var dateofbooking = ("click here to see quiz info!!!"); } function hidetext(href) { document.getElementById("anyid").innerHTML = dateofbooking2; } { var dateofbooking2 = "Quiz<br>Night"; } </script><style type="text/css">.imglinks a{text-align:center;display:block;text-decoration:none;color:white;background-color:gray;width:95px;height:90px;border:1px solid black;font-family:verdana;box-shadow: 10px 10px 5px gray;margin:10px}</style></head><body><div class="imglinks"><a href=""onmouseover="return showtext()"onmouseout="return hidetext()"id="anyid">Quiz<br>Night</div></body></html>

Link to comment
Share on other sites
birbal Devoted Member

birbal

Posted
Posted 
document.getElementById("anyid").class='someclass'; //to change whole class of element  document.getElementById("anyid").style.display='block'; //to change paritcular style of an element

document.getElementById("anyid") returns a elemnt object which is here a div element. you can after that set or update any properties of that object like this.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

you should set the var first without curly brackets 

var dateofbooking = ("click here to see quiz info!!!");var dateofbooking2 = "Quiz<br>Night"; function showtext(href){document.getElementById("anyid").innerHTML = dateofbooking;} function hidetext(href){document.getElementById("anyid").innerHTML = dateofbooking2;}

you also do not need 'return' when calling either function

Link to comment
Share on other sites
jnf555 Member

jnf555

Posted
  • Author
Posted

i have tieded it up ,is that better. but still not added the class option.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript">var mouseover = "click here to see quiz info!!!";var mouseout = "Quiz<br>Night";function showtext(href){document.getElementById("anyid").innerHTML = mouseover;} function hidetext(href){document.getElementById("anyid").innerHTML = mouseout;}</script><style type="text/css">.imglinks a{text-align:center;display:block;text-decoration:none;color:white;background-color:gray;width:95px;height:90px;border:1px solid black;font-family:verdana;box-shadow: 10px 10px 5px gray;margin:10px}</style></head><body><div class="imglinks "><a href=""onmouseover="return showtext()"onmouseout="return hidetext()"id="anyid">Quiz<br>Night</div></body></html>

Link to comment
Share on other sites
jnf555 Member

jnf555

Posted
  • Author
Posted

this is what i wanted to acheive but have altered the style with hover<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><script type="text/javascript">var mouseover = "click here to see quiz info!!!";var mouseout = "Quiz<br>Night";function showtext(href){document.getElementById("anyid").innerHTML = mouseover;} function hidetext(href){document.getElementById("anyid").innerHTML = mouseout;}</script><style type="text/css">.imglinks a{text-align:center;display:block;text-decoration:none;color:white;background-color:gray;width:95px;height:90px;border:1px solid black;font-family:verdana;box-shadow: 10px 10px 5px gray;margin:10px}.imglinks a:hover{text-align:center;display:block;text-decoration:none;color:black;background-color:white;width:105px;height:95px;border:1px solid black;font-family:verdana;box-shadow: 10px 10px 5px gray;margin:10px}</style></head><body><div class="imglinks "><a href=""onmouseover="return showtext()"onmouseout="return hidetext()"id="anyid">Quiz<br>Night</div></body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Now we are getting somewhere, Right you need to use parentNode as you are calling the function from the child element 'a' of parent Element 'div', you also must place a space between each attribute, as some browsers have a problem with this, and you don't have a closing tag for anchor tag, also as mentioned before return or 'href' reference in the function is not required. html

<div class="imglinks "><a href=""onmouseover="return showtext()"onmouseout="return hidetext()"id="anyid">Quiz<br>Night</div>

should be

<div class="imglinks"><a href="#" onmouseover="showtext()" onmouseout="hidetext()" id="anyid">Quiz<br>Night</a></div>

js 

var mouseover = "click here to see quiz info!!!";var mouseout = "Quiz<br>Night";function showtext(){document.getElementById("anyid").innerHTML = mouseover;document.getElementById("anyid").parentNode.className = "imglinks2";}function hidetext(){document.getElementById("anyid").innerHTML = mouseout;document.getElementById("anyid").parentNode.className = "imglinks";}

css

.imglinks a, .imglinks2 a{text-align:center;display:block;text-decoration:none;color:white;background-color:gray;width:95px;height:90px;border:1px solid black;font-family:verdana;box-shadow: 10px 10px 5px gray;margin:10px}.imglinks2 a{color:black;background-color:white;width:105px;height:95px;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...