Soy nuevo en JavaScript. Quiero mostrar los nombres que están en una matriz y cada nombre con datos se coloca en la etiqueta de encabezado. Quiero cambiar el color de fondo del encabezado con cada clic en el encabezado. Estoy usando una ramita para hacer un bucle de contenido.
Lo que he probado es:
<div class="inbox_chat"> {% set newArray = [] %} {% for msg in msg_details %} {% if msg.to_name not in newArray %} <div class="chat_list active_chat"> <div class="chat_people"> <div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> <div class="chat_ib"> <h5 id="txt-msg" onclick="viewMessage('txt-msg')">{{msg.to_name}} <span class="chat_date">{{msg.time}}</span></h5> </div> </div> </div> {% set newArray = newArray|merge([msg.to_name]) %} {% endif %} {% endfor %} </div>Código JavaScript
<script> function viewMessage(elementId){ document.getElementById(elementId).style.backgroundColor = 'green'; } </script>Aquí, el único nombre de los nombres que se muestran cambia cuando se hace clic. Si hago clic en otro nombre de la lista, también cambia el color del nombre. Si hago clic en un nombre de la lista, solo quiero cambiar el color de fondo del nombre en el que se hizo clic. No es el primer color de fondo.
Lo que muestra mi salida:
Cómo cambiar el color de fondo del nombre al hacer clic.
Cuando agrega la misma id a varios elementos HTML y luego intenta seleccionar un elemento individual por esa id , javascript seleccionará la primera identificación que podría encontrar en DOM, por eso cada id debe ser única.
para resolver esto, puede eliminar la id y agregar la misma class a los elementos, luego pasar this a la función que está llamando. cuando se llama a la función, seleccionará todos los elementos en el dom (con querySelectorAll ) que tiene esa class y eliminará los estilos de ellos, luego seleccionará los elementos que pasó con this y cambiará el color.
<body> <h5 class="name" onclick="viewMessage(this)">this is a name</h5> <h5 class="name" onclick="viewMessage(this)">this is a name</h5> <h5 class="name" onclick="viewMessage(this)">this is a name</h5> <h5 class="name" onclick="viewMessage(this)">this is a name</h5> <script> function viewMessage(element) { document.querySelectorAll('.name').forEach((e) => (e.style = '')) element.style.backgroundColor = 'green' } </script> </body> o puede usar addEventListener para lograr lo mismo sin el atributo onclick en sus elementos. aquí está el código:
<body> <h5 class="name">this is a name</h5> <h5 class="name">this is a name</h5> <h5 class="name">this is a name</h5> <h5 class="name">this is a name</h5> <script> const allNames = document.querySelectorAll('.name') allNames.forEach((names) => { names.addEventListener('click', (element) => { removeColor() element.target.style.backgroundColor = 'green' }) }) function removeColor() { allNames.forEach((name) => (name.style = '')) } </script> </body>