Jump to content

Change text with js


jamesb01

Recommended Posts

Hi all,I have a webpage that combines Html, CSS and JavaScript to create a dropdown effect that reveals additional text. What I need to do is add some script which will change the More > text to Close > and back again using onclick or any way that is simple and effective. I am new to JavaScript so my attempts have been in vain. I would appreciate anyone’s help on this thanks. Below is a working sample of the code that I am using.James<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript"><!--if (document.getElementById) {document.write('<style type="text/css">.texter {display:none; color:#404040;font: century gothic, "Lucida Grande", Verdana, Ganeva, Helvetica,sans-serif;;}</style>') } var divNum = new Array("a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12"); function openClose(theID) { for(var i=0; i < divNum.length; i++) { if (divNum == theID) { if (document.getElementById(divNum).style.display == "block") { document.getElementById(divNum).style.display = "none" } else { document.getElementById(divNum).style.display = "block" } } else { document.getElementById(divNum).style.display = "none"; } }}//--></script><style type="text/css"><!--#option { margin: 0 10px 0 10px; height: 100px; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999;}#option img { float:left; margin:0 8px 0 0; padding:0;}#option p { margin-top: 10px; padding: 0 8px 0 0 ; padding:8px; color:#666; font: 12px Verdana, Arial, Helvetica, sans-serif;}#option h3 { margin: 0; padding: 4px 0 0 0 ; }.mainExpand { background-color: #000033; text-align: right; margin: -12px 10px 0 10px;}.mainExpand p { cursor:hand; cursor:pointer; color: white; padding: 6px 4px 6px 0; font: 12px Verdana, Arial, Helvetica, sans-serif; }.texter { display:none; border-left: 1px solid #999; border-right: 1px solid #999; padding: 0 4px 0 4px; margin: -12px 10px 0 10px;}.texter p { padding:8px; color:#666; font: 12px Verdana, Arial, Helvetica, sans-serif;}--></style></head><body><div id="option"> <h3>Option 1</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.</p></div> <div id="a1" class="texter"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula.</p></div><div onClick="openClose('a1')" class="mainExpand"> <p>More ></p> </div></body></html>

Link to comment
Share on other sites

I believe the following creates the element you are referring to:

<p>More ></p>

To change this, you'll want to give the paragraph an id. So the tag might look like this:

<p id="mySwitch">More ></p>

The JavaScript to change that would fit into the function you have. It would look something like this:

document.getElementById("mySwitch").innerHTML = "Close >"

FWIW, all modern browsers support document.getElementById, so you can take that little condition away from your style sheet at the top of the document. Simply embed those style definitions right in your existing style sheet.

Link to comment
Share on other sites

I believe the following creates the element you are referring to:
<p>More ></p>

To change this, you'll want to give the paragraph an id. So the tag might look like this:

<p id="mySwitch">More ></p>

The JavaScript to change that would fit into the function you have. It would look something like this:

document.getElementById("mySwitch").innerHTML = "Close >"

FWIW, all modern browsers support document.getElementById, so you can take that little condition away from your style sheet at the top of the document. Simply embed those style definitions right in your existing style sheet.

Great this works a treat, but what if I had three like this on the same page like:<div id="option"> <img src="images/photo/key_holding.jpg" width="125" height="100" alt="key holding" /> <h3>Option 1</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.</p></div> <div id="a1" class="texter"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula.</p></div><div onClick="openClose('a1')" class="mainExpand"> <p id="changeTxt">More ></p> </div> <div id="option"> <img src="images/photo/alarm_response.jpg" width="125" height="100" alt="Alarm Response" /> <h3>Option 2</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.</p></div> <div id="a2" class="texter"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula.</p></div><div onClick="openClose('a2')" class="mainExpand"> <p>More ></p> </div> <div id="option"> <img src="images/photo/mobile_patrols.jpg" width="125" height="100" alt="Mobile Patrols" /> <h3>Option 3</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.</p></div> <div id="a3" class="texter"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula.</p></div><div onClick="openClose('a3')" class="mainExpand"> <p>More ></p> </div>
Link to comment
Share on other sites

Ah. Should have seen this coming. Scratch EVERYTHING I posted before. Make changes as follows:

document.getElementById(divNum[i]).style.display = "block";this.innerHTML = "<p>Close ></p>"}} else {document.getElementById(divNum[i]).style.display = "none";this.innerHTML = "<p>More ></p>"}

Some explanation. The this keyword refers to an object's parent object. The parent object of an event handler is the element that calls the handler. Since it is your <div> element that calls the handler, this refers to the <div> element itself. Since the <p> element is the only content of the <div>, we'll just change the whole contents. For that same reason, the <p> element does not require an id.

Link to comment
Share on other sites

Ah. Should have seen this coming. Scratch EVERYTHING I posted before. Make changes as follows:
document.getElementById(divNum[i]).style.display = "block";this.innerHTML = "<p>Close ></p>"}} else {document.getElementById(divNum[i]).style.display = "none";this.innerHTML = "<p>More ></p>"}

Some explanation. The this keyword refers to an object's parent object. The parent object of an event handler is the element that calls the handler. Since it is your <div> element that calls the handler, this refers to the <div> element itself. Since the <p> element is the only content of the <div>, we'll just change the whole contents. For that same reason, the <p> element does not require an id.

Ah I see, that makes sense now. I think I'm being thick though I can't get it to work. Where in the code should I put it? var divNum = new Array("a1","a2","a3"); function openClose(theID) { for(var i=0; i < divNum.length; i++) { if (divNum == theID) { if (document.getElementById(divNum).style.display == "block") { document.getElementById(divNum).style.display = "none"; this.innerHTML = "<p>Close ></p>" } else { document.getElementById(divNum).style.display = "block"; this.innerHTML = "<p>More ></p>" } } else { document.getElementById(divNum).style.display = "none"; } }}
Link to comment
Share on other sites

Archived

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

×
×
  • Create New...