• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

323
Views
Agregue el color de estilo rojo a un li adjunto, pero solo cada 3 veces: Javascript

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'); } }); })();
about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>

about 3 years ago · Juan Pablo Isaza Report

0

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; }

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error