Я начал свой собственный собственный проект JS. В конце концов, я хотел бы иметь свою собственную slotmachine. К настоящему моменту у меня проблема: я не знаю, как перезапустить мою программу или просто функцию для генерации снова и снова новых случайных значений. Это мой код до сих пор:Как сбросить генератор случайных чисел JavaScript
var randomX1 = Math.ceil(Math.random() * 10);
var randomX2 = Math.ceil(Math.random() * 10);
var randomX3 = Math.ceil(Math.random() * 10);
function randomClickX() {
document.getElementById("randomX1").innerHTML = randomX1;
document.getElementById("randomX2").innerHTML = randomX2;
document.getElementById("randomX3").innerHTML = randomX3;
var ausgabe = "Play again";
if (randomX1 === randomX2) {
if(randomX2 === randomX3) {
var ausgabe = "Jackpot";
}
}
var chance = ausgabe;
function clickChance() {
document.getElementById("chance").innerHTML = chance;
}
document.getElementById('spanId').innerHTML = chance;
};
.slot-container {
border: 5px solid red;
vertical-align: middle;
font-size: 50px;
font-family: Leelawadee UI Semilight, Calibri, Arial;
width: 90%;
margin: auto;
height: 0;
padding-bottom: 30%;
}
.slot {
border: 3px solid green;
height: 0;
padding-bottom: 30%;
width: 32%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
float: left;
box-sizing: border-box;
}
#slot1 {
margin-left: 1%;
}
h1 {
color: #FC3FD3;
text-align: center;
font-family: Century Gothic;
font-size: 5em;
height: 50px;
}
p {
text-align: center;
vertical-align: middle;
justify-content: center;
}
button {
position: relative;
font-size:20px;
display: block;
background-color: white;
color: black;
border: 2px solid green;
width: 90%;
position: middle;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
button:hover {
background-color: green;
}
button.spin-button {
color: blue;
position: absolute;
height: 20%;
}
.answer {
font-family: Century Gothic;
font-size: 20px;
color: red;
text-align: center;
margin-top: 10px;
}
ul.menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #008000;
}
ul.menubar li {
float: left;
}
ul.menubar li a {
color: black;
display: inline-block;
text-align: center;
padding:15px 20px;
text-decoration: none;
transition: 0.3s;
font-family: Century Gothic;
}
ul.menubar li a:hover {
background-color: #00A300;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Slotmachine</title>
<script type="text/javascript" src="#.js"></script>
<link type="text/css" rel="stylesheet" href="#.css" />
</head>
<body>
<ul class="menubar" id=topmenubar>
<li><a href="#linkHome">Home</a></li> <!-- bedeutet '#' gleicher Link + Ergänzung?-->
<li><a href="#linkContact">Contact</a></a></li>
<li><a href="#linkAbout">About</a></li>
</ul>
<h1>1-10</h1>
<button type="button" id="spin-button" class="button" onClick="randomClickX()">SPIN</button>
<div class="slot-container">
<div id="slot1" class="slot">
<p> <!-- Your random number: --> <a id="randomX1">0</a></p>
</div>
<div id="slot2" class="slot">
<p> <!-- Your random number: --> <a id="randomX2">0</a></p>
</div>
<div id="slot3" class="slot">
<p> <!-- Your random number: --> <a id="randomX3">0</a></p>
</div>
</div>
</div>
<div class="answer" id="spanId">Test #1<a id="spanId"> </div>
</body>
</html>
Как вы видите, я перезагрузить файл HTML нажать кнопку SPIN еще раз, чтобы новые Randoms. Я думаю, что дело в том, чтобы создать большую комплексную функцию и вызвать ее, когда заканчивается функция SPIN. Но я не знаю, как это сделать ... Что такое недостающий шаг, чтобы иметь столько же значений, сколько пожелает пользователь?
Спасибо, Jonas
Просто включите переменные внутри вашего 'функции randomClickX' (вырезать и вставить) – Hackerman
Это не совсем ясно для меня, что вы имеете в виду под«перезагрузки»в данном случае. Как правило, если вы хотите выполнить операцию несколько раз, вы должны поместить эту операцию внутри цикла. Это то, что вы хотите здесь? – David
Вы можете использовать 'location.reload();' – Tinsten