Estoy creando un sitio web en un creador de sitios web, pero me gustaría cambiar el mensaje predeterminado que aparece cuando no se completa algún campo obligatorio en el formulario del sitio web. El formulario al que me refiero es un elemento del propio creador de sitios web.
¿Hay alguna forma de cambiar el texto HTML sin tener acceso directo a él?
Puedo agregar código a <head> , pero no creo que cambie el código existente.
El párrafo que me gustaría cambiar es este:
<div data-v-3a756488=""><p data-v-3a756488="" class="input__error-message z-body-small"> Esse campo é obrigatório </p></div> Estuve estudiando algunas posibles soluciones improvisadas usando CSS, una de ellas seria ocultar el texto que aparece en el HTML y poner otro en el content del CSS, pero se que no es la mejor manera.
Tengo la posibilidad de usar CSS, HTML y JavaScript, el sitio acepta cualquiera de estos lenguajes en el <head> y en los elementos de código incrustado.
Primero agrega un eventListener para verificar si todos los elementos DOM se han cargado con window.addEventListener('load', ... Luego selecciona el elemento que desea cambiar. En este caso, apunté al párrafo con un atributo de datos en la esperanza de que este sea un elemento único con ese atributo de datos: document.querySelector('p[data-v-3a756488=""]') . Luego uso textContent en ese elemento para reemplazar el texto:
window.addEventListener('load', function() { let ele = document.querySelector('p[data-v-3a756488=""]'); let text = 'This is the replaced Text'; ele.textContent = text; }) <div data-v-3a756488=""><p data-v-3a756488="" class="input__error-message z-body-small"> Esse campo é obrigatório </p></div> Si tiene más de 1 elemento en el que desea reemplazar el texto, también puede usar una matriz y un objeto con el mismo método. Simplemente crea una matriz de objetos donde enumera el elemento al que desea apuntar y el texto con el que desea reemplazarlo. Luego puede usar un bucle for para aplicar todos los cambios definidos en la matriz de objetos:
window.addEventListener('load', function() { const replace = [ { element: 'p[data-v-3a756488=""]', text: 'replaced text of the first element' }, { element: 'p[data-v-3a756500=""]', text: 'replaced text of the second element' }, { element: 'p[data-v-6a756488=""]', text: 'replaced text of the third element' } ]; for (let i = 0; i < replace.length; i++) { let ele = document.querySelector(`${replace[i].element}`), text = replace[i].text; ele.textContent = text; } }) <div data-v-3a756488=""><p data-v-3a756488="" class="input__error-message z-body-small"> This is Element 1 </p></div> <div data-v-3a756500=""><p data-v-3a756500="" class="input__error-message z-body-small"> This is Element 2 </p></div> <div data-v-6a756488=""><p data-v-6a756488="" class="input__error-message z-body-small"> This is Element 3 </p></div>