英文:
I can't get my html to execute my js file on Electron
问题
我可能真的不擅长这个，但我已经花了最后两个小时在这上面，所以如果有人能告诉我错在哪里，我将万分感激。
我正在学习 Electron 并试图制作这个游戏，视觉小说风格，包括对话、图片和小游戏。我正在尝试设置对话，以便当玩家按下"空格"键时可以切换。为此，我创建了一个 js 文件并尝试设置它，我觉得代码应该是有效的，但当我按空格键时什么也没发生... 我最好的猜测是应用程序无法识别 js 文件，即使路径看起来是正确的！
HTML：
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script src="blanche.js"></script>
<meta charset="UTF-8" />
<title>Hello World!</title>
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';"
/>
</head>
<body tabindex="0">
<section class="sprite">
<h1>sprite</h1>
</section>
<section class="score">
<h1>score</h1>
</section>
<section class="dialog" id="dialog">
<p id="text" class="text">默认</p>
</section>
<section class="loading">
<h1>loading</h1>
</section>
<section class="rps">
<h1>rps</h1>
</section>
</body>
</html>
CSS：
html, body {
height: 100%;
margin: 0;
}
h1 {
margin: 0;
padding: 0;
}
body {
display: grid;
grid-template-rows: 42% 5% 25% 3% 25%;
gap: 0;
}
.sprite {
background-color: grey;
margin: 0;
padding: 0;
}
.score {
border-top: 3px black solid;
}
.dialog {
border-top: 3px black solid;
margin: 0;
padding: 0;
background-color: rgb(56, 53, 53);
}
.text {
color: green;
font-size: 1.3em;
font-weight: 500;
display: block;
}
.loading {
border-top: 3px black solid;
}
.rps {
border-top: 3px black solid;
}
JS：
const dialog = document.getElementById("dialog");
const text = document.getElementById("text");
let dialogueIndex = 0;
document.addEventListener("keydown", (event) => {
if (event.code === "Space") {
dialogueIndex++;
switch (dialogueIndex) {
case 1:
text.innerHTML = "我很好，谢谢！你呢？";
break;
case 2:
text.innerHTML = "我也很好，谢谢！";
break;
case 3:
dialog.style.display = "none";
break;
default:
break;
}
}
});
我尝试在 js 文件的最开始显示控制台日志，但什么也没有发生。我检查了我的文件名和它们的路径十次，看起来都没有问题...
英文:
I might be really bad at this but I've spent the last two hours on it so if someone could indicate me what's wrong I would be eternally grateful.
I am training on Electron and I am trying to make this game, Visual Novel style, that features dialogs, pictures and minigames. I am trying to set up the dialogs so that they may switch when the player presses "Space". To do that, I created a js file and tried to set it up, and I think the code should be working, but nothing happens when I press space... My best guess is that the app doesnt recognize the js file even tho the pathing should be good !
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script src="blanche.js"></script>
<meta charset="UTF-8" />
<title>Hello World!</title>
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';"
/>
</head>
<body tabindex="0">
<section class="sprite">
<h1>sprite</h1>
</section>
<section class="score">
<h1>score</h1>
</section>
<section class="dialog" id="dialog">
<p id="text" class="text">Défaut</p>
</section>
<section class="loading">
<h1>loading</h1>
</section>
<section class="rps">
<h1>rps</h1>
</section>
</body>
</html>
CSS:
html, body{
height: 100%;
margin: 0;
}
h1{
margin: 0;
padding: 0;
}
body{
display: grid;
grid-template-rows: 42% 5% 25% 3% 25%;
gap: 0;
}
.sprite{
background-color: grey;
margin: 0;
padding: 0;
}
.score{
border-top: 3px black solid;
}
.dialog{
border-top: 3px black solid;
margin: 0;
padding: 0;
background-color: rgb(56, 53, 53);
}
.text{
color: green;
font-size: 1.3em;
font-weight: 500;
display: block;
}
.loading{
border-top: 3px black solid;
}
.rps{
border-top: 3px black solid;
}
JS:
const dialog = document.getElementById("dialog");
const text = document.getElementById("text");
let dialogueIndex = 0;
document.addEventListener("keydown", (event) => {
if (event.code === "Space") {
dialogueIndex++;
switch (dialogueIndex) {
case 1:
text.innerHTML = "Je vais bien, merci ! Et toi ?";
break;
case 2:
text.innerHTML = "Je vais bien aussi, merci !";
break;
case 3:
dialog.style.display = "none";
break;
default:
break;
}
}
});
I tried showing a console log at the very beginning of the js file, nothing happened. I verified the names of my files and their pathing 10 times, nothing looks wrong...
答案1
得分: 1
Solved, thank you! I didnt see the message in the right console, in fact my js was trying to execute before my html was fully loaded, and so, my code couldn't target the element that didnt exist yet. As a solution, I added a window.onload = function() condition with my js, so that it would only activate once the page is loaded. thank you for helping!
英文:
Solved, thank you ! I didnt see the message in the right console, in fact my js was trying to execute before my html was fully loaded, and so, my code couldn't target the element that didnt exist yet. As a solution, I added a window.onload = function() condition with my js, so that it would only activate once the page is loaded. thank you for helping !
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论