Element styling in JavaScript

Let's have a few paragraphs:

<p>text1</p> <p>text2</p> <p>text3</p>

Let's go through these paragraphs in a loop and add a link to the end of each paragraph, by clicking on which some styling will be added to the text of the paragraph. For example, the text of a paragraph will become strikethrough (this is done by the CSS property text-decoration).

Let's discuss two aspects of this problem..

First, as already discussed in previous lessons, you should not change the styles of paragraphs directly through JavaScript - it will be much more convenient to hang some CSS classes.

Secondly, when implementing such a task, some surprise awaits you. To understand its essence, let's look at the HTML code of paragraphs after adding links:

<p>text1<a href="">link</a></p> <p>text2<a href="">link</a></p> <p>text3<a href="">link</a></p>

Imagine now that when you click on the link, the text of the paragraph is crossed out. However, the link in this case is also part of the paragraph and will also be crossed out! Most likely we do not need such an effect. We want the text to strike through, but the link doesn't.

To solve the problem, you just need to wrap the paragraph text in a span tag, like this:

<p><span>text1</span><a href="">link</a></p> <p><span>text2</span><a href="">link</a></p> <p><span>text3</span><a href="">link</a></p>

Given the following HTML code:

<p>text1</p> <p>text2</p> <p>text3</p>

Add a link at the end of each paragraph, upon clicking on which the text of the paragraph will be crossed out (but the link isn't).

Modify the previous task so that after clicking on the link, this link is removed from the paragraph (and the text of the paragraph becomes strikethrough).

Given some HTML table. Add another column with a link to this table. By clicking on this link, the row with this link should turn green.

Modify the previous task so that the first click on the link paints the row green, and the second click cancels this action.