JS change image of many HTML elements and line-through their text

i think is a pretty simple JS script but for some reason i can't get my head around my problem. All i am trying to do is:
(The whole concept is like a ToDO list) i have a list of items and before them i have an image, an empty checkbox in my case. Now, if i click on that empty box (the image), then another image replaces the old one (a ticked box) and the item is crossed over (line-through). If the item is already crossed over and having the ticked image, and click back on the image again, i want it to set both image and text decoration into their initial conditions as before. So far what i 've done:

<script>

function myFunction(element){

 var _img = element.getElementByTagName("img");
 var _txt = element.getElementByTagName("strong");

 if(_img.src == "NonTick_image.jpg"){
   _img.src = "Tick_image.jpg";
   _txt.style.textDecoration = "line-through"; 
}
else {
 _img.src = "NonTick_image.jpg";
 _txt.style.textDecoration = "none"; 
}

};
</script>

Open in new window


<html>
<body>
<div id="div_0" onclick="myFunction(this)"><img id="tick_0" src="NonTick_image.jpg" align="middle" /><strong id="cross_0">Item A</strong></div>
<div id="div_1" onclick="myFunction(this)"><img id="tick_1" src="NonTick_image.jpg" align="middle" /><strong id="cross_1">Item B</strong></div>
<div id="div_2" onclick="myFunction(this)"><img id="tick_2" src="NonTick_image.jpg" align="middle" /><strong id="cross_2">Item C</strong></div>
</body>
</html>

Open in new window


But it doesn't seem to get any results. What am i doing wrong? Any different approaches?
spade velvAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
First up please use code tags - makes your code easier to read (I have done this for you)
1. Highlight Code
2. Click the Code button
CodeTags.jpg
Second getElementByTagName is not a function you probably want getElementsByTagName

Third, you can do this without JavaScript just by using a hidden checkbox and CSS.

Post your NonTick_image.jpg and Tick_image.jpg images and I will show you how to do it without JavaScript.
0
spade velvAuthor Commented:
NonTick_imageTick_image
@Julian Hansen: These are the 2 images
0
Julian HansenCommented:
First up we create a sprite to toggle the image with. Here is minetick-box-sprite.png
Next we change the markup of the list items to include a checkbox and a label like this
<div id="div_0" class="tick-box"><input type="checkbox" id="item_a" name="item_a"/><label for="item_a"><strong id="cross_0">Item A</strong></label></div>
<div id="div_1" class="tick-box"><input type="checkbox" id="item_b" name="item_b" /><label for="item_b"><strong id="cross_1">Item B</strong></label></div>
<div id="div_2" class="tick-box"><input type="checkbox" id="item_c" name="item_c" /><label for="item_c"><strong id="cross_2">Item C</strong></label></div>

Open in new window


Note we have a checkbox IMMEDIATELY (this is important) before the label which in turn contains the <strong ....
The Lable must have a for attribute that contains the ID of the checkbox.

That is all for the markup - now for the CSS
.tick-box label:hover {
  cursor: pointer;
}
.tick-box input[type=checkbox] {
  display: none;
}
.tick-box input:checked + label {
  text-decoration: line-through;
  color: blue;
}
.tick-box label {
  padding-left: 35px;
  line-height: 32px;
  background-image: url('images/tick-box-sprite.png');
  background-repeat: no-repeat;
}
.tick-box input:checked + label {
  background-position

Open in new window


You can see it working here
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
spade velvAuthor Commented:
@Julian Hansen i never thought it would be that simple in the end. CSS has its uses when JS gets sooo complicated. And i am glad you highlighted that to me.
Obviously i had to play a little bit with padding spaces to get it work for me, as more parameters on the website got involved and it seemed my boxes were cut half way through... They needed a little bit of lifting up haha.
And again, @Julian Hansen thanks for you time and your help.
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.