Basically what I am wanting to do is change the value of my H1 tag when a link is clicked.
I have images on my side that I am using a show/hide toggle. I want the header to be one thing when the images are shown and something else when they are hidden
Is there an easy way to accomplish this? I have looked and I cannot find anything that will work.
If you give the H1 tag a (unique) ID, you can access that H1 via the DOM and change the innerHTML or even styles.
BTW… Javascript IS cAsE sEnSiTiVe.
<script type="text/javascript">
function changeTxt(t,o){
var o = document.getElementById(o);
o.innerHTML = t; //Will change the text within the H1 tag to whatever you supply in the first argument, 't'.
o.style.color = "#F00"; //This will change the color of the new text to RED.
}
</script>
<h1 id="anH1tag">This is some text.</h1>
<div id="thisIsAclickableDiv" onclick="changeTxt('This is DIFFERENT text.','anH1tag');">Click here to change</div>
HTH,
So can I have it to where if the images are showing, the H1 tag says “this”
If the images are hidden, the H1 tag says “that”
Right now the H1 tag just switches when I click the Hide link, but it dont switch back when I click the Show link.
Pardon me for pointing out what may be obvious, but I don’t see any hide or show link in the code that you’re wanting help with.
If we can see your code, we can then help to provide more direct guidance for you.
The pseudo-code that I offered only does one thing. I assumed that you at least had enough experience/knowledge to create your own if/else conditional for determining which action to perform.
HTH,
Sorry, I am brand new trying to learn. I will have to look into the if/else condition for javascript.
Here is the code I am using right now.
Image Link
<p><a href="javascript:eToggle('atag','helptxt');"
id="atag" onclick="changeTxt('Basic Javascript and Jquery Test (Images Currently Hidden)','anH1tag');">Hide Images</a>
</p>
And the JS I am using
function eToggle(anctag,darg)
{
var ele = document.getElementById(darg);
var text = document.getElementById(anctag);
if(ele.style.display == "block")
{
ele.style.display = "none";
text.innerHTML = "Show Images";
}
else
{
ele.style.display = "block";
text.innerHTML = "Hide Images";
}
}
function changeTxt(t,o){
var o = document.getElementById(o);
o.innerHTML = t; //Will change the text within the H1 tag to whatever you supply in the first argument, 't'.
}
[quote=“laflair13, post:6, topic:111256”]
Sorry, I am brand new trying to learn.
[/quote] We all gotta start somewhere, right?
Some advice. Use one function to do both; OR call one function that will in turn call the two functions. Also, it’s no longer necessary to use javascript: in an attribute.
What I would do is set the anchor href attribute as href="javascript:void(0);",
then set the onclick to onclick="doTwoThings('atag','helptxt','Basic Javascript and jQuery Test (Images Currently Hidden)','anH1tag');".
Then add a function called “doTwoThings”:
function doTwoThings(anctag,darg,t,o){
eToggle(anctag,darg);
changeTxt(t,o);
}
That should prevent the default action of the anchor tag (so it won’t reload or direct to a different page), and trigger both functions from one function.
Just my $0.03642 worth.
HTH,
I believe I put the code in the correct places but it is not working.
Here is my code.
JS in the header
<script language="javascript">
function eToggle(anctag,darg)
{
var ele = document.getElementById(darg);
var text = document.getElementById(anctag);
if(ele.style.display == "block")
{
ele.style.display = "none";
text.innerHTML = "Show Images";
}
else
{
ele.style.display = "block";
text.innerHTML = "Hide Images";
}
}
function doTwoThings(anctag,darg,t,o){
eToggle(anctag,darg);
changeTxt(t,o);
}
</script>
H1 Tag
<h1 id="anH1tag">Basic Javascript and Jquery Test</h1>
And the image hide/show link
<a href="javascript:void(0);" id="atag" onclick="doTwoThings('atag','helptxt','Basic Javascript and jQuery Test (Images Currently Hidden)','anH1tag');">Hide Images</a>
I appreciate the help. I have learned so much from this boards members over the years.
Where is your changeTxt function? Did you delete it?
Also move all your Javascript to RIGHT before </body>
Open up the console and tell us what messages (if any) are there.
added the changeTxt function back in. It changed it when I clicked, but didnt go back when I clicked again.
Have this right above the closing body
<script language="javascript">
function eToggle(anctag,darg)
{
var ele = document.getElementById(darg);
var text = document.getElementById(anctag);
if(ele.style.display == "block")
{
ele.style.display = "none";
text.innerHTML = "Show Images";
}
else
{
ele.style.display = "block";
text.innerHTML = "Hide Images";
}
}
function doTwoThings(anctag,darg,t,o){
eToggle(anctag,darg);
changeTxt(t,o);
}
function changeTxt(t,o){
var o = document.getElementById(o);
o.innerHTML = t; //Will change the text within the H1 tag to whatever you supply in the first argument, 't'.
}
</script>
You only have it set to make it one value.
o.innerHTML = t; //Will change the text within the H1 tag to whatever you supply in the first argument, 't'.
It will currently never be anything different. Perhaps there is a better way but I’d set up an if/else with a “activeState” variable and on first click…set that “activeState” variable to true…and when you click again it should go to your “else” to and unset. I’m probably explaining poor. Maybe something like this?
var activeState=true;
function changeTxt(t,o){
var o = document.getElementById(o);
if(activeState) {
o.innerHTML = t; //Will change the text within the H1 tag to whatever you supply in the first argument, 't'.
activeState=false;
}
else
{
o.innerHTML="reset";
activeState=true;
}
}
That worked like a charm. I appreciate everyones time, knowledge, and willing to teach me.
Thank You to all.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.