Issue
The first word in the textarea should enter class "word1" with append tag 'li', then the second word should enter class "word2" with tag 'li' and the other words in the same order if no more word from textarea class ol should be emtty
<!DOCTYPE html>
<head>
</head>
<textarea class="rebaz"rows=4 cols=50>hello my name is rebaz</textarea>
<button onclick="show();">Show content</button>
<ol class = "word1"></ol>
<ol class = "word2"></ol>
<ol class = "word3"></ol>
<ol class = "word4"></ol>
<ol class = "word5"></ol>
<ol class = "word6"></ol>
</body>
</html>
after click button
<ol class = "word1"><li>hello</li></ol>
<ol class = "word2"><li>my</li></ol>
<ol class = "word3"><li>name</li></ol>
<ol class = "word4"><li>is</li></ol>
<ol class = "word5"><li>rebaz</li></ol>
<ol class = "word6"></ol>
Solution
You may have a javascript function that will split words from the textarea value and will create a new li
element for each one of them to be appended to the corresponding ol
element selected by its class.
I should point out that if the textarea contains more than 6 words, the 7th and counting will be ignored. That's by design according to your requirements. I should also warn that doing lists with single items is pretty meaningless. Just as a reminder, ol stands for ordered list and li stands for list item.
I added at the beginning of the function, the code to empty all the ol
elements (having a class beginning with word
) before proceeding so that at each execution (press of the button) it will refresh the status.
Eventually I also better styled the lists so that the counter will be unique among all the ol[class^="word"]
.
function show(){
document.querySelectorAll('ol[class^=word]')
.forEach(ol => ol.innerHTML = '');
const source = document.getElementById('textarea');
const words = source.value.split(' ');
words.forEach((word, i) => {
const li = document.createElement('li');
li.textContent = word;
document.querySelector(`.word${i+1}`)?.append(li);
});
}
body {
counter-reset: listCounter; /*defines one counter only*/
}
ol[class^="word"] {
list-style-type: none; /*hides the default numbering*/
padding: 0;
}
ol[class^="word"] > li {
counter-increment: listCounter; /*increment the counter at each li*/
border: solid 1px gray;
padding: .5em 1em;
}
ol[class^="word"] > li::before {
content: counter(listCounter) ". "; /*show the counter at each li*/
font-weight: 600;
}
button{
cursor: pointer;
}
<textarea id="textarea" class="rebaz" rows=4 cols=50>hello my name is rebaz</textarea>
<br>
<button onclick="show();">Show content</button>
<ol class = "word1"></ol>
<ol class = "word2"></ol>
<ol class = "word3"></ol>
<ol class = "word4"></ol>
<ol class = "word5"></ol>
<ol class = "word6"></ol>
Answered By - Diego D
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.