textDecorationLineThrough style property (DHTML) in Javascript

M

mary zelinski

I have a word bank for a javascript crossword puzzle I'm working on. What I
want to do is when a user clicks on a word in the word bank, it crosses
itself out. I have tried:

<a href="javascript:this.style.textDecorationLineThrough">text here</a>

to no avail. does anyone have an idea on how to do this?
 
K

Keith Bowes

mary said:
I have a word bank for a javascript crossword puzzle I'm working on. What I
want to do is when a user clicks on a word in the word bank, it crosses
itself out. I have tried:

<a href="javascript:this.style.textDecorationLineThrough">text here</a>

to no avail. does anyone have an idea on how to do this?
Click to expand...

Element.style.textDecoration = 'line-through'
 
V

Vjekoslav Begovic

mary zelinski said:
I have a word bank for a javascript crossword puzzle I'm working on. What I
want to do is when a user clicks on a word in the word bank, it crosses
itself out. I have tried:

<a href="javascript:this.style.textDecorationLineThrough">text here</a>

to no avail. does anyone have an idea on how to do this?
Click to expand...

<a href="#" onclick="this.style.textDecoration='line-through';return
false;">text here</a>,

but you should consider not using anchor tag if there is no href attribute.
 
M

mary zelinski

If I shouldn't use an anchor, then how should I do it? Also, I should have
mentioned before, when it is struck-out, and the user clicks again, I want
it back to normal. I guess each word could have its own function, but that
would be a pain.

Is there any way to do something like this?

<a href="javascript:strike()" id="word1">

and have the strike function be something like this?

referred_id.style.textDecoration="line-through"

the only problem is, how do I get the script to know which id referred it to
the function? "referred_id" above in this example would be "word1" . I
think I've finally found something that you CAN'T do in DHTML.
 
V

Vjekoslav Begovic

mary zelinski said:
If I shouldn't use an anchor, then how should I do it? Also, I should have
mentioned before, when it is struck-out, and the user clicks again, I want
it back to normal. I guess each word could have its own function, but that
would be a pain.

Is there any way to do something like this?

<a href="javascript:strike()" id="word1">

and have the strike function be something like this?

referred_id.style.textDecoration="line-through"

the only problem is, how do I get the script to know which id referred it to
the function? "referred_id" above in this example would be "word1" . I
think I've finally found something that you CAN'T do in DHTML.
Click to expand...

How about this?
<html>
<head>
<script type="text/javascript">
function strikeInOut(elem){
elem.style.textDecoration = (elem.style.textDecoration ==
'line-through')?'none':'line-through';
}
</script>
</head>
<body>
<a href="#" onclick="strikeInOut(this);return false">word1</a><br>
<a href="#" onclick="strikeInOut(this);return false">word2</a><br>
</body>
</html>
 
L

Lasse Reichstein Nielsen

mary zelinski said:
If I shouldn't use an anchor, then how should I do it? Also, I should have
mentioned before, when it is struck-out, and the user clicks again, I want
it back to normal. I guess each word could have its own function, but that
would be a pain.

Is there any way to do something like this?

<a href="javascript:strike()" id="word1">
Click to expand...

You shouldn't use the "javascript:" pseudo protocol, but yes, you can
do it.
and have the strike function be something like this?

referred_id.style.textDecoration="line-through"
Click to expand...

<script type="text/javascript">
function strike(element) {
element.strikeState = !element.strikeState;
element.style.textDecoration= element.strikeState?"line-through":"none";
}
</script>

<a href="" onclick="strike(this);return false">text here</a>

But again, if you don't have an value for href, you shouldn't be
saying that what you have is an anchor.

Alternatives are:
buttons <button type="button" onclick="strike(this)">text here</button>
- but it doesn't work in, e.g., NS4.
spans <span class="clickarea" onclick="strike(this)">text here</span>
- if you want special styling of the span, use CSS for it. E.g.
<style type="text/css">
.clickarea{
cursor:pointer;
color:red;
}
the only problem is, how do I get the script to know which id referred it to
the function? "referred_id" above in this example would be "word1" . I
think I've finally found something that you CAN'T do in DHTML.
Click to expand...

You could pass the id of the element to the function and have the function
find the element using document.getElementById, but it is easier to just
pass the element itself using the "this" keyword.

/L 'please don't top post'
 
M

mary zelinski

Lasse Reichstein Nielsen said:
You shouldn't use the "javascript:" pseudo protocol, but yes, you can
do it.


<script type="text/javascript">
function strike(element) {
element.strikeState = !element.strikeState;
element.style.textDecoration= element.strikeState?"line-through":"none";
}
</script>

<a href="" onclick="strike(this);return false">text here</a>

But again, if you don't have an value for href, you shouldn't be
saying that what you have is an anchor.

Alternatives are:
buttons <button type="button" onclick="strike(this)">text here</button>
- but it doesn't work in, e.g., NS4.
spans <span class="clickarea" onclick="strike(this)">text here</span>
- if you want special styling of the span, use CSS for it. E.g.
<style type="text/css">
.clickarea{
cursor:pointer;
color:red;
}


You could pass the id of the element to the function and have the function
find the element using document.getElementById, but it is easier to just
pass the element itself using the "this" keyword.

/L 'please don't top post'
Click to expand...

sorry about the top-posting.

Thanks to all who've helped. I guess my best option is the one Vjekoslav
Begovic suggested. My knowledge of javascript is only so advanced. I
would've never thought of that. :) Thanks you all.

James
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Boomer trying to learn coding in C and C++ 6
Javascript DOM 1
Decrypting in Javascript 8
Single put routine overlapping words during iteration 4
Add recipes using JavaScript in table 20
Check forms With JavaScript 1
JavaScript in Acrobat Save As Found Text 3
New To Javascript - Accessing Data 3

Members online

Total: 22 (members: 2, guests: 20)
Robots: 362

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top