我想要做的是向siguiente按鈕發出警報。我創建了變數并通過它們的 id 呼叫元素。出現的錯誤是TypeError: document.getElementById(...) is null 我在 DOM 中添加了一些元素，例如按鈕 siguiente 和 Salir。問題是每次我在 app.js 第 48 行為事件宣告一個變數時都會顯示 null
var section = document.querySelector('seccion');
var container = document.querySelector('container');
var optionButtons = document.querySelector('option-buttons')
var participanteUno = document.getElementById('participante1')
var participanteDos = document.getElementById('participante2');
var historiaLevelUno = 0
var historiaLevelDos = 0
var historia1 = function() {
alert('has recibido un nuevo correo, ?deseas leerlo?')
var base1 = document.getElementById('base');
if(historiaLevelUno == 0) {
base1.innerHTML = '<p> el correo</p>'
}
var contenedor = document.getElementById('contenedor');
var borrarParticipanteUno = document.getElementById('option-buttons').removeChild(participanteUno)
var borrarParticipanteDos = document.getElementById('option-buttons').removeChild(participanteDos);
var botonTerminarJuego = document.createElement('button')
botonTerminarJuego.setAttribute('id', 'salir')
botonTerminarJuego.innerText = 'Salir'
var optionButtons = document.getElementById('option-buttons').appendChild(botonTerminarJuego)
var modEstiloSalir = document.getElementById('salir').style.color = 'black'
var botonSiguiente = document.createElement('button')
botonSiguiente.setAttribute('id', 'siguiente')
botonSiguiente.innerText = 'Siguiente'
optionButtons = document.getElementById('option-buttons').appendChild(botonSiguiente)
var modEstiloSiguiente = document.getElementById('siguiente').style.color = 'black'
var btnGrid = document.getElementById('option-buttons')
btnGrid.style.border = '1px'
btnGrid.style.padding = '10px'
}
var esteban1 = participanteUno.addEventListener('click', historia1, true);
var siguiente = function() {
alert('funciona')
}
var optionButtons = document.getElementById('option-buttons')
var ejecutarSiguiente = document.getElementById('siguiente').addEventListener('click',siguiente, true)`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text Adventure</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<link href="style.css" rel="stylesheet">
<section>
<head>
<div id="titulo">
<h1>Nombre de la obra</h1>
</div>
</head>
</section>
</head>
<body>
<section id="seccion">
<div id="contenedor" class="container">
<div id="base">
<p id="text">Intrucciones: <br> Estás entrando a una obra que requiere de toda tu atención, ya que serás parte de la historia. Para adentrarte a ella deberás hacer uso del botón 'Siguiente' que te mostrará las indicaciones y te ayudará a seguir con la historia. Además, podrás observar el botón 'Terminar juego'; al presionarlo podrás salir de este. Te recomendamos que lo uses en caso de una emergencias (aburrimiento, fatiga, etc.) siempre y cuando hayas acordado con el participante frente a ti previamenente. <br> Lo primero que deberás hacer es escoger qué participante quisieras interpretar (acuerdalo con la persona frente a tí). Una vez hecho esto, presiona el participante que escogiste y podrás empezar con la historia. <br> Ahora sí, que comience la función... </p>
</div>
<div id="option-buttons" class="btn-grid">
<button id='participante1' class="btn">Participante 1</button>
<button id='participante2' class="btn">Participante 2</button>
</div>
</div>
</section>
<script type='text/javascript' src="app.js"></script>
</body>
</html>`
uj5u.com熱心網友回復：
您正在嘗試將 an 分配給"addEventListener('click', callbackFn)"尚不存在的元素。
您的元素id="siguiente"在您呼叫時添加"function historia1()"，在此之前，它還不存在。
解決方案：將元素附加到 后div id="option-buttons"，將事件偵聽器添加到按鈕。
optionButtons = document.getElementById('option-buttons').appendChild(botonSiguiente)
document.getElementById('siguiente').addEventListener('click',siguiente, true);
看這里
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/480802.html
標籤：javascript html jQuery