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.
JavaScript
x
324
324
1
<html>2
3
<head>4
<title>ID</title>5
</head>6
7
<body>8
9
<style type="text/css">10
body {11
background-color: lightgray;12
font-size: 20px;13
}14
15
.dropbtn {16
position: relative;17
background-color: lightgray;18
color: black;19
top: 1px;20
font-size: 16px;21
border: none;22
}23
24
.dropdown {25
position: relative;26
display: inline-block;27
}28
29
.dropdown-content {30
position: relative;31
display: none;32
position: absolute;33
top: 260px;34
left: 645px;35
z-index: 1;36
}37
38
.dropdown-content a {39
padding: 12px 16px;40
text-decoration: none;41
display: block;42
}43
44
.dropdown:hover .dropdown-content {45
display: block;46
}47
48
.dropdown:hover .dropbtn {49
}50
.dropbtn2 {51
position: relative;52
background-color: lightgray;53
color: black;54
top: 1px;55
font-size: 16px;56
border: none;57
}58
59
.dropdown2 {60
position: relative;61
display: inline-block;62
}63
64
.dropdown-content2 {65
position: relative;66
display: none;67
position: absolute;68
top: 260px;69
left: 700px;70
z-index: 1;71
}72
73
.dropdown-content2 a {74
padding: 12px 16px;75
text-decoration: none;76
display: block;77
}78
79
.dropdown2:hover .dropdown-content2 {80
display: block;81
}82
83
.dropdown2:hover .dropbtn2 {84
}85
.dropbtn3 {86
position: relative;87
background-color: lightgray;88
color: black;89
top: 1px;90
font-size: 16px;91
border: none;92
}93
94
.dropdown3 {95
position: relative;96
display: inline-block;97
}98
99
.dropdown-content3 {100
position: relative;101
display: none;102
position: absolute;103
top: 260px;104
left: 745px;105
z-index: 1;106
}107
108
.dropdown-content3 a {109
padding: 12px 16px;110
text-decoration: none;111
display: block;112
}113
114
.dropdown3:hover .dropdown-content3 {115
display: block;116
}117
118
.dropdown3:hover .dropbtn3 {119
}120
.dropbtn4 {121
position: relative;122
background-color: lightgray;123
color: black;124
top: 1px;125
font-size: 16px;126
border: none;127
}128
129
.dropdown4 {130
position: relative;131
display: inline-block;132
}133
134
.dropdown-content4 {135
display: none;136
position: absolute;137
top: 260px;138
left: 790px;139
z-index: 1;140
}141
142
.dropdown-content4 a {143
text-decoration: none;144
display: block;145
}146
147
.dropdown4:hover .dropdown-content4 {148
display: block;149
}150
151
.dropdown4:hover .dropbtn4 {152
}153
#code {154
position: relative;155
top: 300px;156
left: 600px;157
}158
#lang {159
position: relative;160
top: 201px;161
left: 655px;162
font-size: 38px;163
}164
#con {165
position: relative;166
top: 202px;167
left: 700px;168
font-size: 38px;169
}170
#x {171
position: relative;172
top: 202px;173
left: 745px;174
font-size: 38px;175
}176
#g {177
position: relative;178
top: 202px;179
left: 790px;180
font-size: 38px;181
}182
#hl {183
position: relative;184
top: 380px;185
left: 1070px;186
font-size: 38px;187
}188
</style>189
190
<h1 id="hl" contenteditable="true">HLHLHL</h1>191
192
<h1 id="code">NL⠀⠀-⠀⠀⠀⠀⠀-⠀⠀⠀-⠀⠀⠀-</h1>193
194
<div class="dropdown">195
<button class="dropbtn"><h1 id="lang">L</h1></button>196
<div class="dropdown-content">197
<button id="U" onclick="changeU()">U=NFPA (USA)</button>198
<button id="E" onclick="changeE()">E=ISO (Canada)</button>199
<button id="F" onclick="changeF()">F=ISO (French)</button>200
<button id="S" onclick="changeS()">S=Spanish</button>201
</div>202
</div>203
<div class="dropdown2">204
<button class="dropbtn2"><h1 id="con">CON</h1></button>205
<div class="dropdown-content2">206
<button id="OH2" onclick="changeOH2()">Diamond 2/3/Diamond Care</button>207
<button id="OHP" onclick="changeOHP()">Diamond 2/3/DC-Plug & Play</button>208
<button id="OH1" onclick="changeOH1()">Diamond 1</button>209
<button id="NCG" onclick="changeNCG()">Chemetron 400</button>210
<button id="NC5" onclick="changeNC5()">Chemetron 500</button>211
<button id="C73" onclick="changeC73()">Series 73</button>212
<button id="CLI" onclick="changeCLI()">Litharge Series</button>213
<button id="CSA" onclick="changeCSA()">Series A</button>214
<button id="AMI" onclick="changeAMI()">Amico</button>215
<button id="BSB" onclick="changeBSB()">Beacon Series B</button>216
<button id="DIS" onclick="changeDIS()">D.I.S.S</button>217
</div>218
</div>219
<div class="dropdown3">220
<button class="dropbtn3"><h1 id="x">X</h1></button>221
<div class="dropdown-content3">222
<button id="Q" onclick="changeQ()">Ohmeda</button>223
<button id="C" onclick="changeC()">Chemetron</button>224
<button id="D" onclick="changeD()">DISS</button>225
<button id="P" onclick="changeP()">Puritan Bennett</button>226
<button id="O" onclick="changeO()">Oxequip</button>227
<button id="XS" onclick="changeXS()">XS</button>228
</div>229
</div>230
<div class="dropdown4">231
<button class="dropbtn4"><h1 id="g">G</h1></button>232
<div class="dropdown-content4">233
<button id="O2" onclick="changeO2()">OXY</button>234
<button id="A" onclick="changeA()">MEDICAL AIR</button>235
<button id="V" onclick="changeV()">VAC (2 PORT ONLY)</button>236
<button id="2" onclick="change2()">N20</button>237
<button id="C2" onclick="changeC2()">CO2</button>238
</div>239
</div>240
241
<script type="text/javascript">242
function changeU() {243
document.getElementById("lang").textContent = "U";244
}245
function changeE() {246
document.getElementById("lang").textContent = "E";247
}248
function changeF() {249
document.getElementById("lang").textContent = "F";250
}251
function changeS() {252
document.getElementById("lang").textContent = "S";253
}254
function changeOH2() {255
document.getElementById("con").textContent = "OH2";256
}257
function changeOHP() {258
document.getElementById("con").textContent = "OHP";259
}260
function changeOH1() {261
document.getElementById("con").textContent = "OH1";262
}263
function changeNCG() {264
document.getElementById("con").textContent = "NCG";265
}266
function changeNC5() {267
document.getElementById("con").textContent = "NC5";268
}269
function changeC73() {270
document.getElementById("con").textContent = "C73";271
}272
function changeCLI() {273
document.getElementById("con").textContent = "CLI";274
}275
function changeCSA() {276
document.getElementById("con").textContent = "CSA";277
}278
function changeAMI() {279
document.getElementById("con").textContent = "AMI";280
}281
function changeBSB() {282
document.getElementById("con").textContent = "BSB";283
}284
function changeDIS() {285
document.getElementById("con").textContent = "DIS";286
}287
function changeQ() {288
document.getElementById("x").textContent = "Q";289
}290
function changeC() {291
document.getElementById("x").textContent = "C";292
}293
function changeD() {294
document.getElementById("x").textContent = "D";295
}296
function changeP() {297
document.getElementById("x").textContent = "P";298
}299
function changeO() {300
document.getElementById("x").textContent = "O";301
}302
function changeXS() {303
document.getElementById("x").textContent = "XS";304
}305
function changeO2() {306
document.getElementById("g").textContent = "O";307
}308
function changeA() {309
document.getElementById("g").textContent = "A";310
}311
function changeV() {312
document.getElementById("g").textContent = "V";313
}314
function change2() {315
document.getElementById("g").textContent = "2";316
}317
function changeC2() {318
document.getElementById("g").textContent = "C";319
}320
</script>321
322
</body>323
</html>324
Advertisement
Answer
Your problem is the seconf h1 of this pair:
JavaScript
1
4
1
<h1 id="hl" contenteditable="true">HLHLHL</h1>2
3
<h1 id="code">NL⠀⠀-⠀⠀⠀⠀⠀-⠀⠀⠀-⠀⠀⠀-</h1>4
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.