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>
Advertisement
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.