Question 256733 in Html Question posted in
Some basic documentation can be found here.

GetElementyID("ID").innerHTML = value doesn´t work as expected

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>&nbsp; Verfügbare Sprachen und Länder</a>
        <a><img id="AT" onclick="funcAT()" src="...">&nbsp;&nbsp;AT</a>
        <a><img id="DE" onclick="funcDE()"  src="...">&nbsp;&nbsp;DE</a>
        <a><img id="PL" onclick="funcPL()"  src="...">&nbsp;&nbsp;PL</a>
        <a><img id="RO" onclick="funcRO()"  src="...">&nbsp;&nbsp;RO</a>
        <a><img id="UK" onclick="funcUK()"  src="...">&nbsp;&nbsp;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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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!


  2. 0

    you set onclick on tag, so you have to click on to replace and change the color of the text inside of the

    tag.
    I think you want to create a button, for this purpose, you need to move onlick from to tag.

    <a onclick="funcAT()"><img id="AT" src="...">&nbsp;&nbsp;AT</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search