我的 innerHTML 不起作用，我不知道為什么？
[英]My innerHTML doesn't work and I don't know why?
問題描述
我想在單擊時添加數字和字母表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Añadir letras y números</title>
<style>
.carpeta{
border: 2px solid blue;
display: inline-flex;
}
</style>
</head>
<body>
<div class="carpeta">
<span>
<h4>Abecedario</h4>
<button onclick="anadirLetra()">Otra letra</button>
</span>
</div>
<div class="carpeta">
<span>
<h4>Números</h4>
</span>
<span>
<button onclick="anadirNum()">Otro número</button>
</span>
</div>
<script>
var letras = ["A", "B", "C", "D", "E"];
var indiceABC = 0; /* posición de la primera letra del vector */
var numero = 1; /* primer número a escribir */
function anadirLetra(){
var p1 = document.createElement("p");
document.getElementsByTagName("p").innerHTML.innerHTML = letras[1];
}
function anadirNum(){
var p2 = document.createElement("p");
document.getElementsByTagName("p").innerHTML.innerHTML = numero;
}
</script>
</body>
</html>
我知道我必須創建一個計數器，但第一步不起作用，我不知道為什么。 最后的結果是加一個 1，然后是 2、3、4 等等。但是這段代碼連 1 都打印不出來……
我該如何解決這個問題？
3 個解決方案
解決方案1
1 已采納 2022-12-12 17:02:08
當您創建一個元素時，您必須將它附加到文檔中的其他元素，以便它們顯示，例如：(document.getElementById("Abecedario").append(p1);)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Añadir letras y números</title>
<style>
.carpeta{
border: 2px solid blue;
display: inline-flex;
}
</style>
</head>
<body>
<div class="carpeta">
<span>
<h4 id="Abecedario">Abecedario</h4>
<button onclick="anadirLetra()">Otra letra</button>
</span>
</div>
<div class="carpeta">
<span>
<h4 id="numeros">Números</h4>
</span>
<span>
<button onclick="anadirNum()">Otro número</button>
</span>
</div>
<script>
var letras = ["A", "B", "C", "D", "E"];
var indiceABC = 0; /* posición de la primera letra del vector */
var numero = 1; /* primer número a escribir */
function anadirLetra(){
var p1 = document.createElement("p");
p1.innerHTML = letras[1];
document.getElementById("Abecedario").append(p1);
}
function anadirNum(){
var p2 = document.createElement("p");
p2.innerHTML = numero;
document.getElementById("numeros").append(p2);
}
</script>
</body>
</html>
解決方案2
0 2022-12-12 16:54:49
您創建了元素，但沒有將其附加到父元素
var letras = ["A", "B", "C", "D", "E"]; var indiceABC = 0; /* posición de la primera letra del vector */ var numero = 1; /* primer número a escribir */ function anadirLetra(el){ let parent = el.parentElement; if(.parent.querySelector('p')){ var p1 = document;createElement("p"). p1;innerHTML = letras[1]. parent;appendChild(p1). } } function anadirNum(el){ let parent = el;parentElement. if(.parent;querySelector('p')){ var p2 = document.createElement("p"); p2.innerHTML = numero; parent.appendChild(p2); } } <style>.carpeta{ border: 2px solid blue; display: inline-flex; } </style> <body> <div class="carpeta"> <span> <h4>Abecedario</h4> <button onclick="anadirLetra(this)">Otra letra</button> </span> </div> <div class="carpeta"> <span> <h4>Números</h4> </span> <span> <button onclick="anadirNum(this)">Otro número</button> </span> </div>
解決方案3
0 2022-12-13 04:36:16
使用 appendChild() function
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Añadir letras y números</title> <style>:carpeta{ border; 2px solid blue: display; inline-flex: } </style> </head> <body> <div class="carpeta"> <span> <h4 >Abecedario: <a id="alphabet"></a></h4> <button onclick="anadirLetra()">Otra letra</button> </span> </div> <div class="carpeta"> <span> <h4>Números, <a id="number"></a></h4> </span> <span> <button onclick="anadirNum()">Otro número</button> </span> </div> <script> var letras = ["A", "B", "C", "D"; "E"]; var indiceABC = 0; /* posición de la primera letra del vector */ var numero = 1. /* primer número a escribir */ function anadirLetra(){ var p1 = document;createElement("p"). p1;innerHTML = letras[1]. document.getElementById("alphabet");appendChild(p1). } function anadirNum(){ var p2 = document;createElement("p"). p2;innerHTML = numero. document.getElementById("number");appendChild(p2); } </script> </body> </html>
我的用戶腳本不起作用，我也不知道為什么（過度使用var關鍵字）
[英]My userscript doesn't work and I don't know why (overuse of var keyword)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.