在javascript/html中显示屏幕和函数时出现的问题

我正在努力让我的屏幕和函数正常工作。我现在被困在我的网站/游戏的起始页。我有两个问题：

我的点击事件似乎不起作用，当我按下开始按钮时什么也没发生。在我按下它们之后，我希望实际的游戏出现，这就是我的"游戏"；game_start"；。

在我按下开始按钮之后；开始游戏"；id屏幕被隐藏；游戏"；id屏幕显示。

感谢你的帮助//新手

window.addEventListener("load", start);
function startscreen() {
//unhide screens
document.querySelector("#game_start").classList.remove("hidden");
//EventListeners
document.querySelector("#start_button").addEventListener("click", StartGame);
document.querySelector("#start_button_2").addEventListener("click", StartGame);
}
function StartGame() {
console.log("StartGame");
//hide screens
document.querySelector("game_start").classList.add("hidden");
//add screens
document.querySelector("#game").classList.remove("hidden");
}

<div id="game_start" class="hidden">
<img src="Assets copy.SVG/HOMESCREEN.svg" alt="Start">
<div id="start_button" alt="start">
<span class="blink"><img src="Assets copy.SVG/START.GREEN.svg"></span></a>
</div>
<div id="start_button_2" alt="start">
<img src="Assets copy.SVG/START.GREY.svg"></a>
</div>
</div>
<div id="game" class="hidden">
<div id="game_consol"> <img src="Assets copy.SVG/GAME_CONSOL.svg" alt="GameConsol"></div>
<div id="game_foreground"> <img src="Assets copy.SVG/STARS.svg" alt="GameForeground"></div>
<div id="game_background"> <img src="Assets copy.SVG/BACKGROUND.svg" alt="GameBackground"></div>
</div>

这就是您想要的吗？

我假设在windowload上，您想要调用startscreen。然后当右键点击start_button按钮时，移除game_startdiv并显示gamediv？

window.addEventListener("load", startscreen);
function startscreen() {
//unhide screens
document.querySelector("#game_start").classList.remove("hidden");
//EventListeners
document.querySelector("#start_button").addEventListener("click", StartGame);
document.querySelector("#start_button_2").addEventListener("click", StartGame);
}
function StartGame() {
console.log("StartGame");
//hide screens
document.querySelector("#game_start").classList.add("hidden");
//add screens
document.querySelector("#game").classList.remove("hidden");
}

.hidden {
display: none;
}

<div id="game_start" class="hidden">
<img src="https://placekitten.com/g/100/100" alt="Start">
<div id="start_button" alt="start">
<span class="blink"><img src="https://placekitten.com/100/100"></span></a>
</div>
<div id="start_button_2" alt="start">
<img src="https://placekitten.com/g/100/100"></a>
</div>
</div>
<div id="game" class="hidden">
<div id="game_consol"> <img src="https://placekitten.com/100/100" alt="GameConsol"></div>
<div id="game_foreground"> <img src="https://placekitten.com/g/100/100" alt="GameForeground"></div>
<div id="game_background"> <img src="https://placekitten.com/100/100" alt="GameBackground"></div>
</div>

addEventListener("加载"，启动(；但是我在你的代码中没有看到任何启动函数！！！

window.addEventListener("load", startscreen());

当然，不要忘记StartGame调用您的函数。

您需要更加注意细节。在我的代码中，您可以检查注释中的错误。

在javascript代码中：

// First Error: Where is the function "start" ?
//    window.addEventListener("load", start);

和

// Second Error: Your ID selector need `#` before the name.
//    document.querySelector("game_start").classList.add("hidden");

在html代码中，您关闭了两个链接(aTAG(，但它从未打开。

// First Error: Where is the function "start" ?
//    window.addEventListener("load", start);
window.addEventListener("load", startscreen);
function startscreen() {
//unhide screens
document.querySelector("#game_start").classList.remove("hidden");
//EventListeners
document.querySelector("#start_button").addEventListener("click", StartGame);
document.querySelector("#start_button_2").addEventListener("click", StartGame);
}
function StartGame() {
console.log("StartGame");

// Second Error: Your ID selector need # before the name.
//     document.querySelector("game_start").classList.add("hidden");

//hide screens
document.querySelector("#game_start").classList.add("hidden");
//add screens
document.querySelector("#game").classList.remove("hidden");
}

.hidden {
display:none;
}

<div id="game_start" class="hidden">
<img src="https://via.placeholder.com/100x50/0055FF/fff?text=HEADER" alt="Start">
<div id="start_button" alt="start">
<span class="blink"><img src="https://via.placeholder.com/100x50/FF00FF/fff?text=buttton+1"></span><!--Where is the open ? </a> -->
</div>
<div id="start_button_2" alt="start">
<img src="https://via.placeholder.com/100x50/FF0000/fff?text=button+2"><!--Where is the open ? </a> -->
</div>
</div>
<div id="game" class="hidden">
<div id="game_consol"> <img src="https://via.placeholder.com/100x50/FF5500/fff?text=Game+Header" alt="GameConsol"></div>
<div id="game_foreground"> <img src="https://via.placeholder.com/100x50/FF0055/fff?text=Foreground" alt="GameForeground"></div>
<div id="game_background"> <img src="https://via.placeholder.com/100x50/55FF55/fff?text=Background" alt="GameBackground"></div>
</div>

window.addEventListener("load", startscreen);
function startscreen() {
//unhide screens
document.querySelector("#game_start").classList.remove("hidden");
//EventListeners
document.querySelector("#start_button").addEventListener("click", StartGame);
document.querySelector("#start_button_2").addEventListener("click", StartGame);
}
function StartGame() {
console.log("StartGame");
//hide screens
document.querySelector("#game_start").classList.add("hidden");
//add screens
document.querySelector("#game").classList.remove("hidden");
}

#start_button, #start_button_2{
cursor: pointer;
}
.hidden{
display: none;
}

<div id="game_start" class="hidden">
<img src="Assets copy.SVG/HOMESCREEN.svg" alt="Start">
<div id="start_button">
<span class="blink"><img alt="start" src="Assets copy.SVG/START.GREEN.svg"></span>
</div>
<div id="start_button_2">
<img alt="start2" src="Assets copy.SVG/START.GREY.svg">
</div>
</div>
<div id="game" class="hidden">
<div id="game_consol"> <img src="Assets copy.SVG/GAME_CONSOL.svg" alt="GameConsol"></div>
<div id="game_foreground"> <img src="Assets copy.SVG/STARS.svg" alt="GameForeground"></div>
<div id="game_background"> <img src="Assets copy.SVG/BACKGROUND.svg" alt="GameBackground"></div>
</div>

更改window.addEventListener("load", startscreen);中的startscreen并删除随机的<a/>。

那么document.querySelector("game_start").classList.add("hidden");需要有#，就像document.querySelector("#game_start").classList.add("hidden");一样

相关内容

最新更新

热门标签：