javascript - addeventlistener 不运行函数
问题描述
除了 ID 为“spiel”的部分外,一切正常。应该有一个简单的数字游戏,您需要在 1 到 1000 之间猜测一个随机生成的数字。它还可以帮助您判断您的输入是小还是大(groß und klein)。你有 10 次尝试猜数字,否则你输了。
但是当我输入一些数字并按 Enter 按钮时没有任何反应。
在此之前它给
“TypeError:猜测不是 HTMLButtonElement.onclick 的函数”
所以我删除了,onclick
因为我已经有了addeventlistener
.
但这一次它没有给出任何错误,只是不起作用。
(我通常会随游戏一起发送部分,我不确定是否还有其他原因。)
randomnum = Math.floor(Math.random() * 1001);
tries = 10;
function guess(){
tries--;
if (document.getElementById("input").value == randomnum) {
document.getElementById("input").select();
document.getElementById("result").innerHTML = "Gut";
}
if (document.getElementById("input").value < randomnum) {
document.getElementById("input").select();
document.getElementById("help").innerHTML = "Zu Klein";
}
if (document.getElementById("input").value > randomnum) {
document.getElementById("input").select();
document.getElementById("help").innerHTML = "Zu Groß";
}
if (tries == 0) {
document.getElementById("input").select();
document.getElementById("result").innerHTML = "Du hast keine versucher mehr";
}
}
document.getElementById("guess").addEventListener("click", guess());
*{
font-family: 'Chau Philomene One', sans-serif;
}
.leiste {
background-color: #EBBA0E;
height: 60px;
margin: 0px;
padding: 0px;
border: 0px;
position: fixed;
width: 100%;
}
.leistelist li {
display: inline-block;
padding: 0px 5px;
}
.leistelist {
float: right;
}
.letzt {
margin: 0px 30px 0px 0px;
}
body {
margin: 0px;
}
.mainns {
margin: 0px 0px 0px 0px;
}
footer section {
border: 5px solid #2BFAB2;
padding: 5px;
margin: 50px 50px;
border-radius: 15px;
}
footer section Input {
border-radius: 50px;
border-color: #0CF72C;
}
footer section p {
color: #1DDE0B;
margin-block-end: 5px;
margin-block-start: 0px;
}
#infowebsite {
text-align: center;
color: beige;
background-image: url("log5far.png");
background-position: center;
background-size: cover;
padding: 250px;
}
#infowebsite h1 {
font-size: 64px;
margin: 0px;
}
#infowebsite h2 {
font-size: 32px;
margin: 0px;
}
main div table tbody tr th img {
border-radius: 5px;
}
#infoich {
background-color: #EB6E38;
background-position: top;
background-size: cover;
padding: 69px;
}
#infoich h2 {
margin-block-start: 0px;
color: #38EBD3;
font-size: 36px;
}
#infoich p {
color: #38EBD3;
font-size: 24px;
}
#bilder {
background-color: dimgray;
}
#bilder h2 {
margin-block-start: 0px;
padding: 50px 0px 0px 0px;
text-align: center;
font-size: 52px;
color: cornsilk;
}
.Logo {
padding: 5px 5px 5px 25px;
}
.inputtext {
padding: 5px 900px 0px 0px;
border-radius: 5px;
margin: 5px 5px 5px 0px;
}
#kontakt h2 {
margin-block-start: 0px;
margin-block-end: 0px;
}
#ap {
text-align: center;
}
#kontakt {
background-color: cornflowerblue;
}
footer {
background-color: rgb(166, 212, 253);
}
#spiel {
background-color: rgb(65, 65, 65);
}
#spiel h2 {
margin-block-end: 0px;
margin-block-start: 0px;
}
footer hr {
margin-block-start: 0px;
margin-block-end: 0px;
border: darkmagenta solid 1px;
}
#ap :hover {
color: wheat;
}
.leistelist li :hover {
color: wheat;
}
#result {
margin-block-end: 0px;
margin-block-start: 0px;
padding: 50px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Renders</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<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=Chau+Philomene+One&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="leiste">
<a href="https://www.youtube.com/" target="_blank"><img src="phot.png" alt="Logo" height="50px" class="Logo"></a>
<ul class="leistelist">
<li><a href="#infowebsite">Start</a></li>
<li><a href="#infoich">Über Mich</a></li>
<li><a href="#bilder">Galerie</a></li>
<li><a href="#spiel">Spiel</a></li>
<li class="letzt"><a href="#kontakt">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<section id="infowebsite">
<h1>Blender Renders</h1>
<h2>von John Josh</h2>
</section>
<div class="mainns">
<section id="infoich">
<h2>Über Mich</h2>
<p>Über mich gibts nichts viel.</p>
<p>Ich habe diese Website gestaltet um html und css zu lernen sowie auch meine 3D arbeit vorzustellen.</p>
</section>
<section id="bilder">
<h2>Galerie</h2>
<div>
<table>
<tbody>
<tr>
<th><img src="Donut_gut.png" alt="Donut" height="250px"></th>
<th><img src="chess pic.png" alt="Schach" height="250px"></th>
<th><img src="table.png" alt="tisch" height=" 250px"></th>
</tr>
<tr>
<th><img src="Rendered_Baseballschlager.png" alt="Baseballschlager" height="250px"></th>
<th><img src="q2.png" alt="Auto Carpet" height="250px"></th>
<th><img src="gülfogy.png" alt="blume" height="250px"></th>
</tr>
<tr>
<th><img src="var10.png" alt="hintergrund" height="250px"></th>
<th><img src="nomatbar.png" alt="Teeglass" height="250px"></th>
<th><img src="eeeee.png" alt="eee?" height=" 250px"></th>
</tr>
<tr>
<th><img src="var1.jpeg" alt="1" height="250px"></th>
<th><img src="var2.jpeg" alt="2" height="250px"></th>
<th><img src="var3.jpeg" alt="3" height="250px"></th>
</tr>
<tr>
<th><img src="var4.jpeg" alt="4" height="250px"></th>
<th><img src="var5.jpeg" alt="5" height="250px"></th>
<th><img src="var6.jpeg" alt="6" height="250px"></th>
</tr>
<tr>
<th><img src="lava 3.png" alt="lava" width="444.656"></th>
<th><img src="Potio4.png" alt="pot" width="444.656"></th>
<th><img src="pory2.png" alt="poy" width="444.656"></th>
</tr>
<tr>
<hr>
<p id="ap"><a href="AnderePhotos.html" target="_blank">Für andere Phtotos drücken sie Hier.</a></p>
<hr>
</tr>
</tbody>
</table>
</div>
</section>
<section id="spiel">
<h2>Ein kleine Zahl Spiel</h2>
<p> Rechner wird ein zahl zwischen 1 und 1000 wahlen.
Als spieler muss raten welche zahl es ist.
Schreib deine antworten in unten gegebene feld.</p>
<p id="help"></p>
<input type="text" id="input" maxlength="4">
<button type="button" id="guess">Enter</button>
<p id="result"></p>
</section>
</div>
</main>
<footer>
<hr>
<section id="kontakt">
<h2>Kontakt</h2>
<p>Kontaktieren sie uns durch unten gegebene formular (zu zeit funktiniert es nicht).</p>
<form action="" method="get">
<Input type="email" name="nutzername" placeholder="Gmail/Email">
<Input type="password" name="schlüssel" placeholder="Password">
<Input type="submit" name="button">
<textarea cols="8" rows="5" type="textarea" class="inputtext" name="etext">
</form>
</section>
</form>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
解决方案
您需要传递一个函数,但您传递的是函数调用的结果
尝试:
document.getElementById("guess").addEventListener("click", guess);
推荐阅读
- java - Spring Kafka:将 KafkaListenerErrorHandler 应用于所有 KafkaListener
- angular - 组件之间的角度动画不适用于正在播放的视频元素
- canvas - 如何将 HTML5 画布上下文重置为默认值?
- javascript - 如何确保在此类项的呈现时将正确的对象引用传递给 UI 项的单击处理程序?
- c# - C# .NET Standard - 表达式树值未按预期解析
- c# - 我怎么能用这样的运动来限制加速度?
- snowflake-cloud-data-platform - 在雪花中提取变体/json数据
- r - R:重命名表达式中的 R 对象
- laravel - 作曲家更新:调用数组上的成员函数名称()
- css - 如何将全宽容器的内容左侧相对于固定宽度的容器对齐