donaldunca Posted March 31, 2008 Share Posted March 31, 2008 My teacher gives code. But I change it so it can't run like the beginning. Fistly, webpage have a paragraph. When I click it, it will appear a paragraph like the first paragraph but not same color and background color. For example:my paragraph: take this linewhen I click above paragraph, it will appear a paragraph with green background color and white text. If I drag the mouse over, the paragraph will change text color and background color. This is the code: <style>body{margin:5 10 10 70; font: normal 15pt "Times New Roman"; color:navy}div{border:solid 1px cyan; background-color:green; color: white; font: bold 20pt Arial; display:none; width: 650; padding: 10 10 10 10; text-align:center}.note{border:solid 1px cyan; background-color:navy; color: lime; font: bold 18pt Arial; display:none; width: 650; padding: 10 10 10 10;}xmp{font: bold 20pt 'Courier New'; color navy}</style><script language=javascript>function take(){ var obj=document.getElementById("nd"); var objr=document.getElementById("fu"); objr.style.display="block";// I don't understand this line if(document.all) objr.innerText=obj.innerText; else objr.innerHTML=obj.innerHTML;}function see(colo){ var obj=document.getElementById("fu"); switch(colo) { case 1: obj.style.backgroundColor="navy"; obj.style.color="yellow"; break; case 2: obj.style.backgroundColor="green"; obj.style.color="white"; break; }}</script></head><body><p id="nd" onclick="take();">Take this line</p><div id="fu" onclick="Explain();" omouseover="see(1);" onmouseout="see(2);"></div></body></html> Hope you understand. Thank you!! Link to comment Share on other sites More sharing options...
Ingolme Posted March 31, 2008 Share Posted March 31, 2008 I don't see anything wrong with the code.objr.style.display="block"; Will make the indicated object become visible if it was set invisible using the CSS display property.You might want to add this to your CSS:#fu {display: none; }Other things that might be preferrable to change: <script language=javascript> for <script type="text/javascript"> <style> for <style type="text/css"> Create a javascript function called Explain() Maybe you can link me to a page to see the code in action, I might be able to help more. Link to comment Share on other sites More sharing options...
jeffman Posted March 31, 2008 Share Posted March 31, 2008 If possible, start using Firefox as your development browser. I found these two simple errors just by loading your code and checking Firefox's built-in error console. The whole process took 2 minutes.xmp{font: bold 20pt 'Courier New'; color navy}/* YOU FORGOT THE COLON AFTER COLOR <div id="fu" onclick="Explain();" omouseover="see(1);" onmouseout="see(2);">/* YOU SPELLED ONMOUSEOVER WITHOUT THE NBoth these errors lead directly to the malfunction you describe. When I fixed them, the behavior improved. Link to comment Share on other sites More sharing options...
donaldunca Posted April 1, 2008 Author Share Posted April 1, 2008 I see my mistake, so thank you very much. I still have a problem. I add Explain function like this: ........function Explain(){ var obj=document.getElementById("gt"); obj.style.display="block";}</script></head><body><p id="nd" onclick="take();">Take this line</p><div id="fu" onclick="Explain();" onmouseover="see(1);" onmouseout="see(2);"><div id="gt"><p>explain</p></div></div></body></html> But when I click, it didn't appear. I don't know why Link to comment Share on other sites More sharing options...
jeffman Posted April 1, 2008 Share Posted April 1, 2008 It took me a few minutes, but I got it. Notice how div "gt" is nested inside div "fu". That means that div "gt" is part of the innerHTML of "fu". But in the take() function, you destroy the innerHTML of "fu" and replace it with new content. That is, take() destroys "gt".I don't know what your assignment is, but the easiest solution is to move "gt" so it is below "fu" and not inside "fu" :<div id="fu" onclick="Explain();" onmouseover="see(1);" onmouseout="see(2);"></div><div id="gt"><p>explain</p></div> Link to comment Share on other sites More sharing options...
donaldunca Posted April 2, 2008 Author Share Posted April 2, 2008 Thanks again Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.