Change text within a paragraph by pushing a dropdown button

user_16224360 0
Viewed 56

I'm trying to change the text in my paragraph tag from "hi" to "U" by clicking on a drop down button but it doesn't seem to work... Here is my code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ID</title>
</head>

<body>

  <style type="text/css">
    body {
      background-color: lightgray;
      font-size: 20px;
    }
    
    .dropbtn {
      position: relative;
      background-color: black;
      color: white;
      top: 1px;
      font-size: 16px;
      border: none;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      position: relative;
      display: none;
      position: absolute;
      z-index: 1;
      top: 20px;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    #hi {
      position: relative;
      left: 500px;
    }
    
    .dropdown-content a:hover {
      background-color: #ddd;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .dropdown:hover .dropbtn {
      background-color: black;
    }
  </style>
  <div class="dropdown">
    <button class="dropbtn">Language</button>
    <div class="dropdown-content">
      <button id="U" onclick="change()">U=NFPA (USA)</button>
    </div>
  </div>
  <p id="hi">hi</p>

  <script type="text/javascript">
    function change() {
      document.getElementById("hi").value = "U";
    }
  </script>

</body>

</html>

css html javascript
2 Answers

There is no value property for an HTMLHeadingElement. You should be using innerHTML or textContent:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ID</title>
</head>

<body>

  <style type="text/css">
    body {
      background-color: lightgray;
      font-size: 20px;
    }
    
    .dropbtn {
      position: relative;
      background-color: black;
      color: white;
      top: 1px;
      font-size: 16px;
      border: none;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      position: relative;
      display: none;
      position: absolute;
      z-index: 1;
      top: 20px;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    #hi {
      position: relative;
      left: 500px;
    }
    
    .dropdown-content a:hover {
      background-color: #ddd;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .dropdown:hover .dropbtn {
      background-color: black;
    }
  </style>
  <div class="dropdown">
    <button class="dropbtn">Language</button>
    <div class="dropdown-content">
      <button id="U" onclick="change()">U=NFPA (USA)</button>
    </div>
  </div>
  <p id="hi">hi</p>

  <script type="text/javascript">
    function change() {
      document.getElementById("hi").textContent = "U";
    }
  </script>

</body>

</html>

user_142512210

You want to change the text in between the HTML tags, for that you must use the innerHTML element property. click here for more examples

function change() {
  var div = document.getElementById("hi");
  if(div.innerHTML == "U"){div.innerHTML = "hi"}
  else{div.innerHTML = "U"}
}
body {
  background-color: lightgray;
  font-size: 20px;
}
.dropbtn {
  position: relative;
  background-color: black;
  color: white;
  top: 1px;
  font-size: 16px;
  border: none;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  position: relative;
  display: none;
  position: absolute;
  z-index: 1;
  top: 20px;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
#hi {
  position: relative;
  left: 500px;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: black;
}
<div class="dropdown">
  <button class="dropbtn">Language</button>
  <div class="dropdown-content">
    <button id="U" onclick="change()">U=NFPA (USA)</button>
  </div>
</div>
<p id="hi">hi</p>

user_148959850
Related