(simple newbie) changing a character on a html page

Lex · Oct 10, 2003

Hi,

I've got this code to make a table visible and hide it again:

function showHideTable(theTable,theImg)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'block';
}
else
{
document.getElementById(theTable).style.display = 'none';
}
}

Now, the link that triggers this says:

"menu"

I'd like to make it "menu +"

and when the (hidden) table is shown to say: "menu -"

But I don't have a clue as I really don't know anything about javascript.

Does it need to be done with div and if so how?

Thanks,

Lex

Lee · Oct 11, 2003

Lex said:

Now, the link that triggers this says:

"menu"

I'd like to make it "menu +"

and when the (hidden) table is shown to say: "menu -"

Here's how to toggle the text of a link or a button
(in browsers that support innerHTML):

<html>
<head>
<script type="text/javascript">
function toggleLink(tag){
if(tag.innerHTML=="Yes"){
tag.innerHTML="No";
}else{
tag.innerHTML="Yes";
}
}
function toggleButton(button){
if(button.value=="More"){
button.value="Less";
}else{
button.value="More";
}
}
</script>
<body>
<a href="#" onclick="toggleLink(this)">Yes</a>
<form>
<input type="button" onclick="toggleButton(this)" value="More">
</form>
</body>
</html>

Lex · Oct 11, 2003

<script type="text/javascript">
function toggleLink(tag){
if(tag.innerHTML=="Yes"){
tag.innerHTML="No";
}else{
tag.innerHTML="Yes";
}
}
</script>

<body>
<a href="#" onclick="toggleLink(this)">Yes</a>
</body>

Hi Lee, thanks a lot. Now, I've got the following:

<tr class="NavRow"><td class="swath">  </td>
<td class="Nav" onMouseOver="navBar(this,1,1)"
onMouseOut="navBar(this,0,1)"
onClick="showHideTable('beheer');toggleLink(word);return false;"><div
class="NavText"><a href="#" onClick="toggleLink(this);">Beheer menu
+</a></td></tr>

As you can see, the table cell the link is in reacts on a mouseover...

I've tried lots of different things , for example:

<td class="Nav" onMouseOver="navBar(this,1,1)"
onMouseOut="navBar(this,0,1)"><div class="NavText"><a href="#"
onClick="showHideTable('beheer');return false;toggleLink(this);">Beheer menu
+</a></td></tr>

with:

function showHideTable(theTable)
{
if (document.getElementById(theTable).style.display == 'none')
{
document.getElementById(theTable).style.display = 'block';
}
else
{
document.getElementById(theTable).style.display = 'none';
}
}

function toggleLink(tag)
{
if(tag.innerHTML=="Beheer menu +"){
tag.innerHTML="Beheer menu -";
}else{
tag.innerHTML="Beheer menu +";
}

But whatever I try, both of them don't work when I try combining them...

As long as it would work I'd be very happy, I'd be even happier if I could
combine this in one function, that's neater no?

Any ideas?

Lex

Image not changing between "mute" & "un-mute" images.	5	Jun 2, 2023
Positioning a popup	10	Dec 13, 2020
Help with my responsive home page	2	Dec 14, 2022
Javascript not hiding nested elements simultaneously	2	Apr 5, 2023
Canvas drawing HTML Javascript on elementor	1	Feb 22, 2023
How to have two html audio players on one page?	0	May 3, 2022
Hide table using radio button	0	Apr 15, 2004
Javascript - "function not defined"	28	Apr 15, 2010

(simple newbie) changing a character on a html page

Lex

Lee

Lex

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads