debería ser como
<ul id="list"> <li>1</li> <li>2</li> <li>3</li> <- Text should be red ... <li>6</li> <- red </ul>Quiero que cuando haga clic en la etiqueta del botón, el valor del contenido de la etiqueta de entrada se agregue como etiqueta li, pero por cada tercera vez que agregué, el texto debe ser rojo. Cómo hacer esto en JavaScript.
<div> <input id="text" type="text" /> <button id="add">Add</button> </div> <ul id="list"></ul> (function () { document.querySelector('#add').addEventListener('click', function () { let input = document.querySelector('#text'); if (input.value !== '') { let list = document.querySelector('#list'); let item = document.createElement('li'); // create li node let itemText = document.createTextNode(input.value); // create text node item.appendChild(itemText); // append text node to li nod list.appendChild(item); // append li node to list input.value = ''; // clear input } else { alert('Input text value'); } }); })();Si entiendo, desea que el li agregado esté en color rojo durante 3 segundos.
Si es así, puede agregar un estilo para el nuevo li y eliminarlo en setTimeout de 3 segundos:
item.classList.add("new-added-item"); setTimeout(() => { item.classList.remove("new-added-item"); }, 3000); (function () { document.querySelector('#add').addEventListener('click', function () { let input = document.querySelector('#text'); if (input.value !== '') { let list = document.querySelector('#list'); let item = document.createElement('li'); // create li node let itemText = document.createTextNode(input.value); // create text node item.appendChild(itemText); // append text node to li nod list.appendChild(item); // append li node to list input.value = ''; // clear input item.classList.add("new-added-item"); setTimeout(() => { item.classList.remove("new-added-item"); }, 3000); } else { alert('Input text value'); } }); })(); .new-added-item { color: red; } <div> <input id="text" type="text" /> <button id="add">Add</button> </div> <ul id="list"></ul>Puede elegir que el 3.º y el 6.º <li> se coloreen en rojo con el siguiente código CSS:
li:nth-of-type(3) { color: red; } li:nth-of-type(6) { color: red; }