Skip to content

Content Editable Method Not Working Properly [closed]

while working on my website I came across an odd problem for some reason I cant get the contenteditable="true" command to work on my heading with the id “hl” if anyone could help me get it working that would be awesome. I just want the contenteditable command to work so that I can change the HLHLHL text within the website.

<html>

<head>
  <title>ID</title>
</head>

<body>

  <style type="text/css">
    body {
      background-color: lightgray;
      font-size: 20px;
    }
    
    .dropbtn {
      position: relative;
      background-color: lightgray;
      color: black;
      top: 1px;
      font-size: 16px;
      border: none;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
        position: relative;
      display: none;
      position: absolute;
      top: 260px;
      left: 645px;
      z-index: 1;
    }
    
    .dropdown-content a {
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .dropdown:hover .dropbtn {
    }
    .dropbtn2 {
      position: relative;
      background-color: lightgray;
      color: black;
      top: 1px;
      font-size: 16px;
      border: none;
    }
    
    .dropdown2 {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content2 {
        position: relative;
      display: none;
      position: absolute;
      top: 260px;
      left: 700px;
      z-index: 1;
    }
    
    .dropdown-content2 a {
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown2:hover .dropdown-content2 {
      display: block;
    }
    
    .dropdown2:hover .dropbtn2 {
    }
    .dropbtn3 {
      position: relative;
      background-color: lightgray;
      color: black;
      top: 1px;
      font-size: 16px;
      border: none;
    }
    
    .dropdown3 {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content3 {
        position: relative;
      display: none;
      position: absolute;
      top: 260px;
      left: 745px;
      z-index: 1;
    }
    
    .dropdown-content3 a {
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown3:hover .dropdown-content3 {
      display: block;
    }
    
    .dropdown3:hover .dropbtn3 {
    }
    .dropbtn4 {
      position: relative;
      background-color: lightgray;
      color: black;
      top: 1px;
      font-size: 16px;
      border: none;
    }
    
    .dropdown4 {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content4 {
      display: none;
      position: absolute;
      top: 260px;
      left: 790px;
      z-index: 1;
    }
    
    .dropdown-content4 a {
      text-decoration: none;
      display: block;
    }
    
    .dropdown4:hover .dropdown-content4 {
      display: block;
    }
    
    .dropdown4:hover .dropbtn4 {
    }
    #code {
            position: relative;
            top: 300px;
            left: 600px;
        }
        #lang {
            position: relative;
            top: 201px;
            left: 655px;
            font-size: 38px;
        }
        #con {
            position: relative;
            top: 202px;
            left: 700px;
            font-size: 38px;
        }
        #x {
            position: relative;
            top: 202px;
            left: 745px;
            font-size: 38px;
        }
        #g {
            position: relative;
            top: 202px;
            left: 790px;
            font-size: 38px;
        }
        #hl {
            position: relative;
            top: 380px;
            left: 1070px;
            font-size: 38px;
        }
  </style>

  <h1 id="hl" contenteditable="true">HLHLHL</h1>

  <h1 id="code">NL⠀⠀-⠀⠀⠀⠀⠀-⠀⠀⠀-⠀⠀⠀-</h1>
  
  <div class="dropdown">
    <button class="dropbtn"><h1 id="lang">L</h1></button>
    <div class="dropdown-content">
      <button id="U" onclick="changeU()">U=NFPA (USA)</button>
      <button id="E" onclick="changeE()">E=ISO (Canada)</button>
      <button id="F" onclick="changeF()">F=ISO (French)</button>
      <button id="S" onclick="changeS()">S=Spanish</button>
    </div>
  </div>
  <div class="dropdown2">
    <button class="dropbtn2"><h1 id="con">CON</h1></button>
    <div class="dropdown-content2">
      <button id="OH2" onclick="changeOH2()">Diamond 2/3/Diamond Care</button>
      <button id="OHP" onclick="changeOHP()">Diamond 2/3/DC-Plug & Play</button>
      <button id="OH1" onclick="changeOH1()">Diamond 1</button>
      <button id="NCG" onclick="changeNCG()">Chemetron 400</button>
      <button id="NC5" onclick="changeNC5()">Chemetron 500</button>
      <button id="C73" onclick="changeC73()">Series 73</button>
      <button id="CLI" onclick="changeCLI()">Litharge Series</button>
      <button id="CSA" onclick="changeCSA()">Series A</button>
      <button id="AMI" onclick="changeAMI()">Amico</button>
      <button id="BSB" onclick="changeBSB()">Beacon Series B</button>
      <button id="DIS" onclick="changeDIS()">D.I.S.S</button>
    </div>
  </div>
  <div class="dropdown3">
    <button class="dropbtn3"><h1 id="x">X</h1></button>
    <div class="dropdown-content3">
      <button id="Q" onclick="changeQ()">Ohmeda</button>
      <button id="C" onclick="changeC()">Chemetron</button>
      <button id="D" onclick="changeD()">DISS</button>
      <button id="P" onclick="changeP()">Puritan Bennett</button>
      <button id="O" onclick="changeO()">Oxequip</button>
      <button id="XS" onclick="changeXS()">XS</button>
    </div>
  </div>
  <div class="dropdown4">
    <button class="dropbtn4"><h1 id="g">G</h1></button>
    <div class="dropdown-content4">
      <button id="O2" onclick="changeO2()">OXY</button>
      <button id="A" onclick="changeA()">MEDICAL AIR</button>
      <button id="V" onclick="changeV()">VAC (2 PORT ONLY)</button>
      <button id="2" onclick="change2()">N20</button>
      <button id="C2" onclick="changeC2()">CO2</button>
    </div>
  </div>

  <script type="text/javascript">
    function changeU() {
      document.getElementById("lang").textContent = "U";
    }
    function changeE() {
      document.getElementById("lang").textContent = "E";
    }
    function changeF() {
      document.getElementById("lang").textContent = "F";
    }
    function changeS() {
      document.getElementById("lang").textContent = "S";
    }
    function changeOH2() {
      document.getElementById("con").textContent = "OH2";
    }
    function changeOHP() {
      document.getElementById("con").textContent = "OHP";
    }
    function changeOH1() {
      document.getElementById("con").textContent = "OH1";
    }
    function changeNCG() {
      document.getElementById("con").textContent = "NCG";
    }
    function changeNC5() {
      document.getElementById("con").textContent = "NC5";
    }
    function changeC73() {
      document.getElementById("con").textContent = "C73";
    }
    function changeCLI() {
      document.getElementById("con").textContent = "CLI";
    }
    function changeCSA() {
      document.getElementById("con").textContent = "CSA";
    }
    function changeAMI() {
      document.getElementById("con").textContent = "AMI";
    }
    function changeBSB() {
      document.getElementById("con").textContent = "BSB";
    }
    function changeDIS() {
      document.getElementById("con").textContent = "DIS";
    }
    function changeQ() {
      document.getElementById("x").textContent = "Q";
    }
    function changeC() {
      document.getElementById("x").textContent = "C";
    }
    function changeD() {
      document.getElementById("x").textContent = "D";
    }
    function changeP() {
      document.getElementById("x").textContent = "P";
    }
    function changeO() {
      document.getElementById("x").textContent = "O";
    }
    function changeXS() {
      document.getElementById("x").textContent = "XS";
    }
    function changeO2() {
      document.getElementById("g").textContent = "O";
    }
    function changeA() {
      document.getElementById("g").textContent = "A";
    }
    function changeV() {
      document.getElementById("g").textContent = "V";
    }
    function change2() {
      document.getElementById("g").textContent = "2";
    }
    function changeC2() {
      document.getElementById("g").textContent = "C";
    }
  </script>

</body>
</html>

Answer

Your problem is the seconf h1 of this pair:

  <h1 id="hl" contenteditable="true">HLHLHL</h1>

  <h1 id="code">NL⠀⠀-⠀⠀⠀⠀⠀-⠀⠀⠀-⠀⠀⠀-</h1>

It is positioned to overwrite the first header.

You can experiment in your browser’s devtools by making the second of these h1s have display: none – then you will be able to click on the first.

the layout is a bit odd, as if the NL bit with the dashes has been shoved in as an afterthought. A re coding of that whole part might be a good idea, to get everything into a logical order.