Jump to content

changing button text with onclick SOLVED with thanks in last post


niche

Recommended Posts

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

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

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

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

Thanks! Had "el" in place of "this". Why "this" instead of "el"?

Link to comment
Share on other sites

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 function
function 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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks Ingolme. Also, to ShadowMage and thescientist, thank-you very much.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...