Changing HTML code with Javascript show/hide -
i have tried few different things, including switch statement, appending using jquery etc. , can't work button. trying alter words in p2 from:
please force `<button id = "me" onclick = "toggle1('me');">this </button>` show more info me. to:
please force `<button id = "me" onclick = "toggle1('me');">this </button>` hide more info me. i have same thing "courses" think if understand first one, how sec see/hide on own. confused :/
i think has span tags, in first week of html , have not learned simple procedures things yet. appreciate , help can help me figure out.
<!doctype html> <html> <head> <title>about me</title> <style> body { background-color:#add8e6; } #p3 { display:none; } #myimage { width:280px; height:280px; } #schedule { width: 100%; display:none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script language = "javascript" > function changeimage() { var image = document.getelementbyid('myimage'); if (image.src.match("hrgswitch")) { image.src = "hrg.jpg"; } else { image.src = "hrgswitch.jpg"; } } function toggle1(obj) { if(obj == "me") { if(document.getelementbyid("p3").style.display == "none" || document.getelementbyid("p3").style.display == "") { document.getelementbyid("p3").style.display = "block"; } } else { document.getelementbyid("p3").style.display = "none"; } } else if (obj == "courses") { if(document.getelementbyid("schedule").style.display == "none" || document.getelementbyid("schedule").style.display == "") { document.getelementbyid("schedule").style.display = "block"; } else { document.getelementbyid("schedule").style.display = "none"; } } } </script> </head> <body> <h1> page </h1> <img id="myimage" onclick="changeimage();" src="hrg.jpg" /> <p title="about me"> stuff me <br> <a href="http://www.w3schools.com/" target="_blank">here link larn more html!</a> <br> <br> </p> <p id = "p2"> <br> <br> please force <button id = "me" onclick = "toggle1('me');">this </button> see more info me. <br> <br> please force <button id = "courses" onclick = "toggle1('courses');">this </button> see list of courses." </p> <p id = "p3" > more stuff me... <br> </p> <br> <table id = "schedule"> <tr> <td>course name</td> <td>date</td> <td>time</td> </tr> <tr> <td>programming paradigms</td> <td>tuesday / thursday</td> <td>11:00-12:15</td> </tr> <tr> <td>computer organization</td> <td>tuesday / thursday</td> <td>9:30-10:45</td> </tr> <tr> <td>linear algebra</td> <td>monday/wednesday/friday</td> <td>11:50-12:40</td> </tr> <tr> <td>combinatorics </td> <td>monday/wednesday/friday</td> <td>8:35-9:25</td> </tr> </table> </body> </html>
you have syntax error in function toggle1. remove unwanted braces. seek this:
<script language = "javascript" > function toggle1(obj) { if(obj == "me") { if(document.getelementbyid("p3").style.display == "none" || document.getelementbyid("p3").style.display == "") { document.getelementbyid("p3").style.display = "block"; } else { document.getelementbyid("p3").style.display = "none"; } } else if (obj == "courses") { if(document.getelementbyid("schedule").style.display == "none" || document.getelementbyid("schedule").style.display == "") { document.getelementbyid("schedule").style.display = "block"; } else { document.getelementbyid("schedule").style.display = "none"; } } } </script> but, if using jquery, toggle inbuilt function. simple as(inline js - although recommended seperate script): remove toggle1 function , alter 2 html onclick attributes:
please force <button id = "me" onclick = "$('#p3').toggle()">this </button> see more info me. please force <button id = "courses" onclick = "$('#schedule').toggle()">this </button> see list of courses. javascript html
No comments:
Post a Comment