/    Sign up×
Community /Pin to ProfileBookmark

changing p text with buttons (Noob question)

I’m trying to have a button change the text within a P tag. Doing this once is fine:

[CODE]<script>
function lights()
{
document.getElementById(“lights”).innerHTML=”Lights on”;
}
</script>[/CODE]

BUT, what I’d like to do is have it toggle between two pieces of text each time the button is clicked. For example, the button should change the text to “lights on” or lights off”.

Thanks in advance for your help and apologies for asking such a basic question, but we’ve all got to start somewhere ?

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@JMRKERNov 22.2013 — Consider this ...
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;

&lt;title&gt; Untitled &lt;/title&gt;
&lt;style type="text/css"&gt;
#switchDisplay { width:100px; border:3px solid black; padding:10px 10px; text-align:center; }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;button onclick="lightSwitch(this)" value="off"&gt;Light&lt;/button&gt;
&lt;p id="switchDisplay"&gt;Light is OFF&lt;/p&gt;

&lt;script type="text/javascript"&gt;
function lightSwitch(info) {
if (info.value == "off") {
document.getElementById('switchDisplay').innerHTML = 'Light is ON';
document.getElementById('switchDisplay').style.backgroundColor = '#ffff00';
info.value = 'on';
} else {
document.getElementById('switchDisplay').innerHTML = 'Light is OFF';
document.getElementById('switchDisplay').style.backgroundColor = '#ffffff';
info.value = 'off';
}
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;



Or, alternatively ...
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;

&lt;title&gt; Light Switch &lt;/title&gt;
&lt;style type="text/css"&gt;
#switchDisplay { width:100px; background-color:#aaaaaa;
border:3px solid black; padding:10px 10px; text-align:center; }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;p id="switchDisplay"&gt;Light is OFF&lt;/p&gt;
&lt;button onclick="lightSwitch(this)" value="OFF"&gt; Light Switch &lt;/button&gt;

&lt;script type="text/javascript"&gt;
function lightSwitch(info) {
var msg = 'Light is ';
var colour;
if (info.value == "OFF") { info.value = 'ON'; colour = '#ffff00'; }
else { info.value = 'OFF'; colour = '#aaaaaa'; }
document.getElementById('switchDisplay').innerHTML = msg+info.value;
document.getElementById('switchDisplay').style.backgroundColor = colour;
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@fandangoauthorNov 22.2013 — Perfect! Thanks, that makes sense ?
Copy linkTweet thisAlerts:
@JMRKERNov 22.2013 — You're most welcome.

Happy to help.

Good luck! ?
×

Success!

Help @fandango spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...