所以我正在嘗試為顯示“下一步”按鈕的專案制作游戲。當我將事件偵聽器添加到變數時,我的代碼似乎無法正常作業。控制臺告訴我,即使變數為空,并且在檢查器上事件標簽也不會出現。我似乎不知道問題是什么。
var section = document.querySelector('seccion');
var container = document.querySelector('container');
var text = document.querySelector('text');
var optionButtons = document.querySelector('option-buttons')
const button = document.getElementById('next');
var siguiente = button.addEventListener('click', next, true);
var next = function() {
var aparece = alert('funciona')
};
<!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">
</head>
<body>
<section id="seccion">
<div class="container">
<div id="text">text</div>
<div id="option-buttons" class="btn-grid">
<button id='next' class="btn">Siguiente</button>
</div>
</section>
</div>
<script type='text/javascript' src="app.js"></script>
</body>
</html>
uj5u.com熱心網友回復:
- 您的 HTML 無效
帶有“容器”類的 div 需要在部分標簽內關閉,您的在它之外。
為了防止這種錯誤,我推薦了一些像這樣的 HTML 格式化程式。 - 在您的 JavaScript 中,您在定義函式之前使用它。
在這種情況下,它是下一個功能。在將其添加到 EventListener 之前定義它,如下所示:
function next() {
var aparece = alert('funciona')
}
var siguiente = button.addEventListener('click', next, true);
uj5u.com熱心網友回復:
您需要更改變數以使用 javascript 提升功能或更改代碼順序:
var section = document.querySelector('seccion');
var container = document.querySelector('container');
var text = document.querySelector('text');
var optionButtons = document.querySelector('option-buttons')
const button = document.getElementById('next');
var siguiente = button.addEventListener('click', next, true);
function next() {
var aparece = alert('funciona')
};
或者
var section = document.querySelector('seccion');
var container = document.querySelector('container');
var text = document.querySelector('text');
var optionButtons = document.querySelector('option-buttons')
const button = document.getElementById('next');
var next = function() {
var aparece = alert('funciona')
};
var siguiente = button.addEventListener('click', next, true);
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/476072.html
標籤:javascript
上一篇:單擊影像應僅使用JavaScript在另一個div中顯示相應的影像
下一篇:如何使用pug遍歷行內var
