I am currently using the following script to echo visible text on the screen...
<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>
How should I edit this script, to make it work in case I want it to type a non visible word in the html?
Example:
#ciao{height:350px;}
#salut{height:10px;}
#hallo{height:3000px;}
<div id="MyText">
The problem is with the above code, this will result in printing a visible text, instead of rather choosing the css id. So how am I supposed to edit the script?
It is more idiomatic to add an appropriate class to the div element. [edit] it appears as though you are looking to set the class based on the contents of the div. This is generally a difficult thing to do but here is one approach. Another would be to set a property of the div and then do a :before hack to create a pseudo element with the text of the property.
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>