niche Posted March 14, 2012 Share Posted March 14, 2012 I'm doing the tutorial at: http://www.w3schools...s/js_events.asp It's been a few months since I worked with JS and it's not coming back. How can I toggle between button text that displays "Show Date" and "Show Paragragh" by modifying this code from the tutorial: <html><head><script type="text/javascript">function display(){document.getElementById("demo").innerHTML=Date();}</script></head><body><h1>My First Web Page</h1><p id="demo">This is a paragraph.</p><button type="button" onclick="display()">Show Date</button></body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted March 14, 2012 Share Posted March 14, 2012 Are you changing the text of the button? Or the paragraph? If you want to change the button you'll need to pass it to the function as a parameter:onclick="display(this)" and modify your function to work with that parameter: function display(el) { //...other stuff... if (el.innerHTML == 'Show Date') { el.innerHTML = 'Show Paragraph'; } else { el.innerHTML = 'Show Date'; }} Link to comment Share on other sites More sharing options...
niche Posted March 14, 2012 Author Share Posted March 14, 2012 I'd like to change text of the button for learning purposes. How do I get the el.innerHTML inside the button? Link to comment Share on other sites More sharing options...
thescientist Posted March 14, 2012 Share Posted March 14, 2012 he just showed you If you want to change the button you'll need to pass it to the function as a parameter:onclick="display(this)" and modify your function to work with that parameter: function display(el) { //...other stuff... if (el.innerHTML == 'Show Date') { el.innerHTML = 'Show Paragraph'; } else { el.innerHTML = 'Show Date'; }} Link to comment Share on other sites More sharing options...
niche Posted March 14, 2012 Author Share Posted March 14, 2012 Thanks! Had "el" in place of "this". Why "this" instead of "el"? Link to comment Share on other sites More sharing options...
thescientist Posted March 14, 2012 Share Posted March 14, 2012 as mentioned in his post If you want to change the button you'll need to pass it to the function as a parameter:onclick="display(this)" you are passing a reference to the elementthis to the functiondisplay. el is only meaningful within the function scope. anything you pass to the function will be referenced internally as whatever you define within the parenthesis when defining the functionfunction display(el){} when you call a function, as in the case, you establish that it needs to be passed an element reference onclick="display(this)" el on it's own inside that function call would be meaningless if you are unclear of all this, maybe checkout the tutorials on function, and how passing parameters/arguments works. Link to comment Share on other sites More sharing options...
niche Posted March 14, 2012 Author Share Posted March 14, 2012 Thanks and good suggestion. Would you please turn this into an example of displaying innerHTML, with the function, using id? Based on this: <html><head><script type="text/javascript">function display(el) {if (el.innerHTML == 'Show Date') { el.innerHTML = 'Show Paragraph'; } else { el.innerHTML = 'Show Date'; }}</script></head><body><button type="button" onclick="display(this)">Show Date</button></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted March 14, 2012 Share Posted March 14, 2012 huh? I'm not sure what you need at this point Link to comment Share on other sites More sharing options...
ShadowMage Posted March 14, 2012 Share Posted March 14, 2012 Do you mean something like this: function display() { if (document.getElementById('my_btn').innerHTML == 'Show Date') { document.getElementById('my_btn').innerHTML = 'Show Paragraph'; } else { document.getElementById('my_btn').innerHTML = 'Show Date'; }} Code like that is very specific and not very useful. It is better to write code in a generic fashion as in the example I originally posted. Link to comment Share on other sites More sharing options...
niche Posted March 14, 2012 Author Share Posted March 14, 2012 I'm experimenting with mult buttons created by a php while loop. Each time the page refreshes I loose text in button from the 2nd condition. I thought IDs might be a way around that, but I now think that's not even relevant. It now seems a choice between using the XMLHttpRequest object or just going server side. I think server side would be less work. What do you think? Link to comment Share on other sites More sharing options...
thescientist Posted March 14, 2012 Share Posted March 14, 2012 maybe a fuller explanation of what you are trying to accomplish? if you need to send the id in AJAX request, use the generic function to get the element like SM posted, and then get the id like this var id = el.id; Link to comment Share on other sites More sharing options...
niche Posted March 14, 2012 Author Share Posted March 14, 2012 I need the innerHTML to remain on refresh. Given that there will potentially be many buttons, onclick will reset all the buttons to the first condition upon refresh. I need to save the second condition so it re-displays upon refresh. Doing this server side seems like less code. I would add a column to a table I'm already using that would determine the text inside the button. How could I save that second condition client-side? $_SESSION? Link to comment Share on other sites More sharing options...
thescientist Posted March 14, 2012 Share Posted March 14, 2012 if you use AJAX, there will be no refresh. that is the whole point of AJAX. Link to comment Share on other sites More sharing options...
niche Posted March 14, 2012 Author Share Posted March 14, 2012 I understand, but I have the button is in a form. That may be the missing piece that I should've told you. I'm trying to use JS to avoid refresh, but the form may preclude that now that I think about it. These buttons send info to a dimension of $_SESSION. Can that be done without the form? If so, how generally. I never thought of that possibility until just now. Link to comment Share on other sites More sharing options...
ShadowMage Posted March 14, 2012 Share Posted March 14, 2012 No, you don't need a form to send an AJAX request if that's what you're asking. You just retrieve the value or innerHTML of whatever elements you need and send it in the request: var param = document.getElementById('an_element').value;request.open("GET", "www.domain.com/myPage?param="+param, true);request.send(); This will make param available in the $_GET array. var param = document.getElementById('an_element').value;request.open("POST", "www.domain.com/myPage", true);request.send("param="+param); This will make param available in $_POST. Link to comment Share on other sites More sharing options...
niche Posted March 14, 2012 Author Share Posted March 14, 2012 Thanks. I'm compelled to adapt the HTML at http://www.w3schools..._livesearch.asp for this example. Am I on the right track? If so, generally, what are the differences coding for onclick instead of onkeyup (ie what do I use for an input)? Link to comment Share on other sites More sharing options...
niche Posted March 15, 2012 Author Share Posted March 15, 2012 I've got this far. How do I get the var type into the xmlhttp.onreadystatechange=function() so I can send it to a php script?Code so far: <head><script type="text/javascript">function display(el) { if (el.innerHTML == 'Send to Cart') { el.innerHTML = 'Sent to Cart'; var type="sent"; } else { el.innerHTML = 'Send to Cart'; var type="send"; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { ?????????? } } xmlhttp.open("GET","livesearch.php?q="+str,true); xmlhttp.send();}</script></head><body><button type="button" onclick="display(this)">Show Date</button></body></html> Link to comment Share on other sites More sharing options...
niche Posted March 15, 2012 Author Share Posted March 15, 2012 This script successfully connects with my php script. I went through this exercise thinking that I'll save a lot of bandwith through client-side. What are some of the downsides to moving data with AJAX? btw, here's my code: <?php$name = $_GET['name'];echo $name;?> <head><script type="text/javascript">function display(el) { var type=""; if (el.innerHTML == 'Send to Cart') { el.innerHTML = 'Sent to Cart';type="sent"; } else { el.innerHTML = 'Send to Cart';type="send"; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { alert(xmlhttp.responseText); } } console.log(el.name); xmlhttp.open("GET","test99.php?name="+el.name,true); xmlhttp.send();}</script></head><body><button name="jasmine" type="button" onclick="display(this)">Show Date</button></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted March 15, 2012 Share Posted March 15, 2012 Downsides: People who have Javascript disabled won't see anything on your site. The solution to that problem is to build the system using just HTML, links, forms and PHP and then use Javascript to manipulate it so that the form and links don't change the page. Link to comment Share on other sites More sharing options...
niche Posted March 15, 2012 Author Share Posted March 15, 2012 I heard that the XMLHttpRequest object requests are harder on servers, something about leaving something open compared to form submissions. Link to comment Share on other sites More sharing options...
Ingolme Posted March 15, 2012 Share Posted March 15, 2012 I haven't heard anything like that. An XMLHTTP Request is exactly the same as a normal HTTP request from the server's point of view. Link to comment Share on other sites More sharing options...
niche Posted March 15, 2012 Author Share Posted March 15, 2012 Thanks Ingolme. Also, to ShadowMage and thescientist, thank-you very much. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.