Actualmente estoy usando el siguiente script para hacer eco del texto visible en la pantalla...
<h1 id="MyText"></h1> <script> var el = document.getElementById('MyText'); { if (italian || french || german) { el.innerHTML = ( (italian && 'ciao') || (french && 'salut') || (german && 'hallo') ); } else { el.innerHTML = 'hello';} } </script>¿Cómo debo editar este script para que funcione en caso de que quiera que escriba una palabra no visible en el html?
Ejemplo:
#ciao{height:350px;} #salut{height:10px;} #hallo{height:3000px;} <div id="MyText">El problema es con el código anterior, esto dará como resultado la impresión de un texto visible, en lugar de elegir la identificación de css. Entonces, ¿cómo se supone que debo editar el guión?
Es más idiomático agregar una clase apropiada al elemento div. [editar] parece que está buscando establecer la clase en función del contenido del div. Esto es generalmente algo difícil de hacer, pero aquí hay un enfoque. Otra sería establecer una propiedad del div y luego hacer un :before hack para crear un pseudo elemento con el texto de la propiedad.
const langauges = { "ciao":"italian", "salut":"french", "hallo":"german", "hello":"english" } const updateClass = (el)=>{ if(langauges[el.innerHTML] != undefined){ el.className = langauges[el.innerHTML]; } } const onChange = (event)=>{ const el = event.target; updateClass(el); } var el = document.getElementById('MyText'); el.addEventListener("input",onChange,false); updateClass(el); .italian{height:350px; color:blue;} .french{height:10px; color:red;} .german{height:3000px; color:yellow;} .english{height:3000px; color:purple;} <h1 id="MyText" contenteditable="true">ciao</h1>