I try to change the textvalue and the color of strings in the HTML in a top navigation bar (img ressource deleted).
What is the mistake here? Is it enough to reference the ID of an ELement if it is nested in a class? Currently this approach does not work (no change in HTML).
Would have been a quick test to replace the text values on the HTML page with custom / translated texts via the navigation bar (choice of language).
Description of malfunction:
Textelements don´t change, when the button element is clicked.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head></head>
<style>
.topnav {
overflow: hidden;
width: 645px;
background-color: white;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
position: center;
margin-left: -32px;
}
.topnav a {
float: left;
color: black;
background-color: white;
text-align: center;
padding: 10px 8px;
text-decoration: none;
text-align: center;
font-weight: 600;
font-size: 16px;
border-left: 1px solid black;
}
.topnav a:hover {
background-color: darkgrey;
color: white;
cursor: pointer;
}
div a img {
width: 21px;
height: 12px;
margin-left: 5px;
}
</style>
<body>
<script>
function funcAT(){
document.getElementById("TEST1").innerHTML ="TestOfFunction";
document.getElementById("TEST1").style.color = "red";
}
function funcDE(){
document.getElementById("TEST2").innerHTML ="TestOfFunction 2";
document.getElementById("TEST2").style.color = "red";
}
</script>
<div class="topnav">
<a class="lang_btn"><i class="fa fa-commenting-o"></i> Verfügbare Sprachen und Länder</a>
<a><img id="AT" onclick="funcAT()" src="..."> AT</a>
<a><img id="DE" onclick="funcDE()" src="..."> DE</a>
<a><img id="PL" onclick="funcPL()" src="..."> PL</a>
<a><img id="RO" onclick="funcRO()" src="..."> RO</a>
<a><img id="UK" onclick="funcUK()" src="..."> UK</a>
</div><br>
<p id="TEST" >predefined value</p>
<p id="TEST1">predefined value 1</p>
<p id="TEST2">predefined value 2</p>
</body>
</html>
Resolution:
Using button instead of img+text for top navigation bar element, due to with actual approach the effect only occurs if clicking directly on the img element.
Unfortunately, I didn't notice that because I interpreted the entire element as a button in terms of functionality (but didn't implement it that way, but as separate a and img elements -> so only the images responds to clicks).
So there was no wrong behaviour, but a non-correct implementation.
Thanks for your help!