We Keep Coding

Get substring from url and copy to clip board?

Hey i am trying some thing for my school project, i hope you can help me in it.
I want to copy the substring from url, like
Url = https://www.example.com/blah/blah&code=12432
substring = 12432
Also i want to print the substring in Copy Box .
Please Help Me with this issue. It is required for my project to copy some text from string.
(function() {
var copyButton = document.querySelector('.copy button');
var copyInput = document.querySelector('.copy input');
copyButton.addEventListener('click', function(e) {
e.preventDefault();
var text = copyInput.select();
document.execCommand('copy');
});
copyInput.addEventListener('click', function() {
this.select();
});
})();
html, body {
height: 100%;
}
body {
font-size: 16px;
background: #FFD1DD;
display: flex;
align-items: center;
justify-content: center;
}
* {
box-sizing: border-box;
}
.wrapper {
padding: 0 5px;
}
h1 {
text-align: center;
font-size: 40px;
margin-bottom: 1.2em;
text-decoration: underline;
text-transform: uppercase;
}
p {
font-family: 'VT323', monospace;
font-size: 20px;
}
.container {
display: flex;
background: #FFA3BB;
border-radius: 7px;
padding: 10px;
margin: 0 auto;
}
h3 {
font-size: 28px;
text-transform: uppercase;
text-align: center;
span {
display: inline-block;
position: relative;
}
}
.copy, .paste {
flex-grow: 1;
width: 50%;
}
.copy {
border-right: 2px solid;
padding-right: 10px;
h3 {
span {
background: #76ECFF;
}
}
input {
padding-right: 90px;
}
}
.paste {
padding-left: 10px;
h3 {
span {
background: #FAE916;
}
}
}
form {
position: relative;
width: 100%;
input {
display: block;
width: 100%;
border: 3px solid;
outline: 0;
background: #FFF;
font-size: 25px;
padding: 5px 4px;
margin-bottom: 20px;
}
button {
display: block;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
border: 0;
outline: 0;
color: #FFF;
background: #000;
font-family: 'VT323', monospace;
font-size: 25px;
text-transform: uppercase;
padding: 0.08em 0.8em;
cursor: pointer;
}
}
<div class="wrapper">
<h1>Link Copy</h1>
<p>Select the link text by clicking within the input then copy yourself or just click the copy button. Paste into the paste side to see that it works!</p>
<div class="container">
<div class="copy">
<h3>Copy <span><i class="fa fa-hand-peace-o"></i></span></h3>
<form>
<input type="text" value="https://codepen.io/she_codes/pen/OgrJJe/">
<button type="button">Copy</button>
</form>
</div>
<div class="paste">
<h3>Paste <span><i class="fa fa-smile-o"></i></span></h3>
<form>
<input type="text">
</form>
</div>
</div><!-- end .container -->
</div><!-- end .wrapper -->

Use this it will work
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"

try this, assuming nothing is ever after "code="
var url = window.location.href;
var index = url.indexOf("code=");
var substring = url.substring(index + 5);
copyInput.setAttribute('value', substring);

Click for Dropdown not working when generated in a loop

I have a table that is populated from a database with a dropdown menu that is populated along side the table which is generated from code in the php. Im tying to use javascript and css to make each drop down open on click but I cannot seem to get it to work. I've included the code below. I initilly had the script working but it only worked on the first instance of the dropdown. I reviewed a similar post to what Im looking to do but it was to no avail.
CSS
background-color: #04AA6D;
color: white;
padding: 5px;
font-size: 12px;
border: none;
text-transform: uppercase;
}
.yardDropbtn i{
font-size: 12px;
top: 1px;
position: relative;
}
.yardDropdown{
position: relative;
display: inline-block;
}
.yard-dropdown-content{
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
.yard-dropdown-content a{
color: black;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.yard-dropdown-content a:hover {
background-color: #ddd;
}
.yardDropBtnCt {
display: none;
background-color: #f1f1f1;
color: black;
/*margin-left: 5px;*/
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
text-transform: uppercase;
font-size: 12px;
}
.yardDropBtnCt:hover {
background-color: #ddd;
}
.trackBtn{
display: none;
background-color: #f1f1f1;
color: black;
margin-left: 5px;
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
}
.trackBtn:hover{
background-color: #ddd;
}
/*.yard-dropdown-content:hover{
background-color: #ddd;
}*/
.show_yard_Dropdown .yard-dropdown-content {
display: block;
}
.show_yard_Dropdown .yardDropbtn {
background-color: #3e8e41;
}
JavaScript
var dropDownDivY = document.querySelector(".yardDropdown");
/*dropDownButton.addEventListener("click", function(){
dropDownDivY.classList.toggle('show_yard_Dropdown');
});*/
dropDownButton.forEach(btn => {
btn.onclick = function() {
dropDownDivY.style.display = "block";
}
});
HTML
<tr>
<td width='50px' class='yard8'>6400'</td>
<td width='100px' class='yard8 track'>Receiving 1</td>
<td width='150px' class='yard8'></td>
<td width='150px' class='yard8'>
<td width='250px' class='yard8 destination'></td>
<td width='100px'class='yard8 length'>3455'</td>
<td width='100px' class='yard8 weight'></td>
<td width='150px' class='yard8 status'></td>
<td class='yard8'>
<div class='progressContainer'>
<div class='progress' style='width:54%'>54%</div>
</div>
</td>
<td class='yard8 remarks'></td>
<td width='59px'>
<div class="yardDropdown">
<button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
<div class="yard-dropdown-content">Edit TrackAEI Populate</div>
</div>
</td>
</tr>
<form action="" method="POST"></form>

document.querySelector(".yardDropdown");
The querySelector method only returns the first element matching the selector, so it can never work for more than the first row.
You need to use querySelectorAll instead and then loop over all the elements found:
let dropDowns = document.querySelectorAll(".yardDropdown");
for (let i = 0; i < dropDowns.length; i++) {
let dropDown = dropDowns[i]
dropDown.addEventListener('click', function () {
// do something, you can use the `i` variable to know which row has been clicked if you need to
})
}

window.print inclusive textarea values

I am trying to print an html page, which works wonderfully, but I am missing the values ​​within the text areas when printing?
How can I include the values ​​of the text areas?
Here is the code of the print function:
function print(section) {
var printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<html><head><title>Navigationlog</title>');
//Print the Table CSS.
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write('<style type = "text/css">');
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head>');
//Print the DIV contents i.e. the HTML Table.
printWindow.document.write('<body>');
var divContents = document.getElementById(section).innerHTML;
printWindow.document.write(divContents);
printWindow.document.write('</body>');
printWindow.document.write('</html>');
printWindow.print();
printWindow.close();;
}
Here is the complete example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<style id="table_style" type="text/css">
#media print {
body {
transform: scale(.97);
height: fit-content;
width: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
}
textarea {
font-size: 1.0vw;
}
#routeTable td {
font-size: 1.0vw;
}
#routeTable th {
font-size: 1.0vw;
}
}
html {
font-family: Arial, Helvetica, sans-serif;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
/* for Debug */
}
body {
font-family: Arial, Helvetica, sans-serif;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
/* for Debug */
}
/* Style the tab content */
.pagecontent {
display: none;
}
/* Navlog */
tr {
vertical-align: middle;
padding-top: 0.5vw;
padding-bottom: 0.5vw;
border-collapse: collapse;
}
th {
vertical-align: middle;
padding-top: 0.5vw;
padding-bottom: 0.5vw;
text-align: left;
border-collapse: collapse;
}
td {
text-align: left;
vertical-align: top;
padding: 0.3vw;
border-collapse: collapse;
}
#left {
background: linear-gradient(to top right, #357987, #357987 49%, black 49%, black 51%, transparent 51%, transparent);
}
#right {
background: linear-gradient(to bottom right, #357987, #357987 49%, black 49%, black 51%, transparent 51%, transparent);
}
table {
width: 100% !important;
font-family: Arial, Helvetica, sans-serif;
vertical-align: middle;
border-spacing: 0;
border-collapse: collapse;
background-color: white;
color: white;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
border: none;
width: 100%;
height: 100%;
background-color: transparent;
resize: none;
outline: none;
font-size: 2vw;
vertical-align: middle;
text-align: center;
padding: 0;
}
#routeTable td {
border: 0.2vw solid black;
font-size: 1.4vw;
text-align: center;
vertical-align: middle;
}
#routeTable th {
border: 0.2vw solid black;
font-size: 1.4vw;
text-align: center;
}
#routeTable tr {
border: 0.2vw solid black;
}
#routeTable table {
table-layout: fixed;
display: inline-block;
overflow-wrap: break-word;
max-width: 100%;
}
p {
display: block;
margin-block-start: 0.2vw;
margin-block-end: 0.2vw;
margin-inline-start: 0vw;
margin-inline-end: 0vw;
font-weight: bold;
padding-top: 0.5vh;
padding-bottom: 0.5vh;
color: black;
}
#toolbar {
display: flex;
justify-content: space-around;
background-color: #035869;
align-items: flex-start;
align-content: flex-start;
padding: 0.5vh 0;
}
#document_controls {
height: 30px;
padding: 0.5vh 0;
padding-left: 1vh;
}
#save,
#print,
#previous,
#next {
font-size: large;
font-family: Verdana;
background-color: #357987;
color: white;
text-align: center;
cursor: pointer;
height: 100%;
width: 15vw;
outline: none;
border: 2px solid white;
margin: 0 0.5vh;
}
#save:hover,
#print:hover,
#previous:hover,
#next:hover {
font-size: larger;
}
</style>
<body>
<div id="toolbar" class="noprint">
<div id="document_controls">
<button id="print" onclick="printPage()">Print</button>
</div>
</div>
<div id="Navlog" class="pagecontent" style="padding-bottom: 1cm;">
<section id="pageNavlog">
<table id="routeTable" style="margin-top: 1vw;">
<tbody>
<tr>
<td style="background-color: #035869; font-size: 2vw;" colspan="17">Navigationlog</td>
</tr>
</tbody>
</table>
<table id="routeTable" style="border: none; margin-top: -0.2vw;">
<tbody style="border: none;">
<tr>
<td style="background-color: #357987; width: 15%" colspan="3">Aircraft Registration:</td>
<td colspan="3"><textarea style="height: 1.5em; text-align: left; margin-left: 0.5vw; padding-top: 0.21em;"></textarea></td>
<td style="background-color: #357987; width: 15%" colspan="2">Date:</td>
<td colspan="3"><textarea style="height: 1.5em; text-align: left; margin-left: 0.5vw; padding-top: 0.21em;"></textarea></td>
<td style="background-color: #357987; width: 15%" colspan="3">Pilot in command:</td>
<td colspan="4"><textarea style="height: 1.5em; text-align: left; margin-left: 0.5vw; padding-top: 0.21em;"></textarea></td>
</tr>
</tbody>
</table>
</section>
</div>
</body>
<script>
var openNavlog = openPage('Navlog');
function openPage(page) {
// Declare all variables
var i, pagecontent;
// Get all elements with class="tabcontent" and hide them
pagecontent = document.getElementsByClassName("pagecontent");
for (i = 0; i < pagecontent.length; i++) {
pagecontent[i].style.display = "none";
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(page).style.display = "block";
}
function printPage() {
print('pageNavlog');
}
function print(section) {
var printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<html><head><title>Navigationlog</title>');
//Print the Table CSS.
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write('<style type = "text/css">');
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head>');
//Print the DIV contents i.e. the HTML Table.
printWindow.document.write('<body>');
var divContents = document.getElementById(section).innerHTML;
printWindow.document.write(divContents);
printWindow.document.write('</body>');
printWindow.document.write('</html>');
printWindow.print();
printWindow.close();;
}
</script>
</html>

Just giving a point, you are just selecting all innerHTML but not the values. So one of the easiest way is to just save the textarea values and assign it back while printing in a printWindow.
I just added the above words in programming sentence in the below code.
function print(section) {
var textArea1 = document.getElementById('1').value;
var textArea2 = document.getElementById('2').value;
var textArea3 = document.getElementById('3').value;
var printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<html><head><title>Navigationlog</title>');
//Print the Table CSS.
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write('<style type = "text/css">');
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head>');
//Print the DIV contents i.e. the HTML Table.
printWindow.document.write('<body>');
var divContents = document.getElementById(section).innerHTML;
printWindow.document.write(divContents);
printWindow.document.write('</body>');
printWindow.document.write('</html>');
printWindow.document.getElementById('1').value = textArea1;
printWindow.document.getElementById('2').value = textArea2;
printWindow.document.getElementById('3').value = textArea3;
printWindow.print();
printWindow.close();
}
I think it's not the best way. But it works very fine.

How do I get the value of a users input and then convert it to HH:MM format in javascript or jquery using moment.js?

I read that moment.js would do the trick, and have it included in my files but I don't know where to start. I need to get the value from an input field (#enterClockIn), convert it to HH:MM, and then once I have that value, I need to be able to add/subtract hours and minutes from it.
I currently have 1 function that is triggered by a click and would like to include this new code right into it so everything calculates at once. Here's is my codepen for this project:
https://codepen.io/lgrizo/pen/LLxbab
HTML CODE:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Hind:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>40 Hour Workweek Calculator</title>
</head>
<body>
<header>
<h3>Workweek Calculator</h3>
</header>
<div class="wrapper">
<div>
<h4 class="sections totalHours">How many hours do you plan on working this week?</h4>
<input type="text" maxlength="2" class="userInput" id="hoursThisWeek" placeholder="ex: 40" />
</div>
<div>
<h4 class="sections fridayHours">On Friday morning, how many hours<br />(in whole numbers) do you currently have?</h4>
<input type="text" maxlength="2" class="userInput" id="fridayMorning" placeholder="ex: 33">
</div>
<div>
<h4 class="sections remDecimal">Enter remaining decimals:</h4>
<input type="text" maxlength="3" class="userInput" id="remainingDecimals" placeholder="ex: .57" />
</div>
<div>
<h4 class="sections clockFriday">Enter time you clocked in on Friday:</h4>
<input type="text" maxlength="8" class="userInput" id="enterClockIn" placeholder="ex: 07:22 AM" /><br />
</div>
<!-- <div class="buttons">
<button class="amButton">AM</button>
<button class="pmButton">PM</button>
</div> -->
<div>
<h4 class="sections lunch">Enter today's lunch break in minutes:</h4>
<input type="text" maxlength="3" class="userInput" id="enterLunch" placeholder="ex: 30"/>
</div>
<div class="sections calculate">
<button class="calcButton" onclick="calculateButton()">Calculate my hours</button>
</div>
<div class="resultsDiv">
<div>
<h4 class="sections currentHoursWorked results">Current hours worked:</h4>
<output type="text" class="defaultCalc resultsCalc" id="currentWorked">
</output>
</div>
<div>
<h4 class="sections remainHours results">Remaining hours to work:</h4>
<output type="text" class="defaultCalc resultsCalc" id="hoursLeftToWork">
</output>
</div>
<div>
<div>
<h4 class="sections remainHours results">Time to clock out on Friday:</h4>
<output type="text" class="defaultCalc clockOutTime resultsCalc" id="currentWorked">
</output>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js"integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="js/jquery.js"></script>
<script src="js/moment.js"></script>
</body>
</html>
CSS
/*Base style layouts*/
header, body {
font-family: 'Hind', sans-serif;
}
body {
background: #edf0f1;
font-family: 'Hind', sans-serif;
text-align: center;
}
header {
width: 100%;
height: 70px;
border-bottom-left-radius: 46px;
border-bottom-right-radius: 46px;
background-image: linear-gradient(120deg, #96deda 0%, #50c9c3 40%);
box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
color: #fff;
text-align: center;
}
header h3 {
margin: 0;
padding-top: 20px;
font-size: 1.4em;
font-weight: 300;
}
h4 {
font-weight: 300;
color: #000;
text-align: center;
}
.sections {
margin: 30px 0;
}
/*Gray areas that display javascript calculations*/
.defaultCalc {
display: inline-block;
line-height: 29px;
font-weight: 300;
font-family: 'Hind', sans-serif;
line-height: 14.5px;
vertical-align: middle;
-webkit-appearance: none;
}
/*Sections that require the user to input a number*/
.userInput::placeholder {
font-weight: 300;
font-style: italic;
color: rgba(149, 152, 154, 0.4);
text-align: center;
padding-top: 8px;
}
.userInput {
border: 1px solid #C3C8CB;
width: 133px;
height: 29px;
border-radius: 12px;
text-align: center;
color: #000;
font-weight: 300;
font-family: 'Hind', sans-serif;
line-height: 14.5px;
vertical-align: middle;
/*this removed the box shadow that was showing up on safari mobile*/
-webkit-appearance: none;
}
.sections {
margin: 30px 0;
}
/*Buttons*/
.amButton, .pmButton {
border: 1px solid #C3C8CB;
width: 45px;
height: 29px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-family: 'Hind', sans-serif;
line-height: 29px;
font-weight: 300;
padding-right: 5px;
box-sizing: border-box;
}
.buttons {
margin: 25px 0;
text-align: center;
box-sizing: border-box;
}
.calcButton {
border: 1px;
width: 250px;
height: 36px;
background-color: #50c9c3;
color: #FFF;
border-radius: 12px;
font-weight: 100;
font-size: 1.2em;
text-align: center;
font-family: 'Hind', sans-serif;
line-height: 36px;
}
.clockOutAMButton, .clockOutPMButton {
border: 1px solid #C3C8CB;
width: 45px;
height: 29px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
text-align: center;
display: inline-block;
line-height: 30px;
margin-top: 20px;
margin-bottom: 100px;
font-family: 'Hind', sans-serif;
font-weight: 300;
}
input:focus {
outline: 0;
}
output:focus {
outline: 0;
}
button:focus {
outline: 0;
}
.userInput:focus {
outline: none !important;
border:1px solid #50c9c3;
}
.calcButton:active {
font-size: 1.175em;
}
#currentWorked,
#hoursLeftToWork {
width: 180px;
height: 29px;
text-align: center;
line-height: 30px;
vertical-align: middle;
color: #60B6FF;
}
#media (min-width: 768px) {
header {
margin: 0 auto;
width: 80%;
}
.wrapper {
margin: 0 auto;
width: 575px;
}
.resultsDiv {
width: 650px;
}
.results {
display: inline-block;
width: 250px;
text-align: right;
padding-right: 50px;
}
.totalHours {
display: inline-block;
padding-right: 75px;
text-align: left;
width: 300px;
}
.fridayHours {
display: inline-block;
padding-right: 75px;
text-align: left;
width: 300px;
}
.remDecimal {
display: inline-block;
padding-right: 75px;
text-align: right;
width: 300px;
}
.clockFriday {
display: inline-block;
padding-right: 75px;
text-align: right;
width: 300px;
}
.buttons {
text-align: center;
padding-left: 380px;
margin-top: 0px;
}
.amButton, .pmButton {
text-align: center;
}
.lunch {
display: inline-block;
padding-right: 75px;
text-align: right;
width: 300px;
}
.lastButtons {
text-align: center;
padding-left: 380px;
}
.clockOutAMButton, .clockOutPMButton {
margin-top: 0px;
margin-bottom: 0px;
}
.sections, .clockOutTime, .defaultCalc {
vertical-align: middle;
}
.calcButton {
width: 520px;
}
}
JS
function calculateButton() {
// this gets the value for the "hours planned on working this week" field
var hoursThisWeek = parseInt(document.getElementById('hoursThisWeek').value);
// current hours on friday morning
var fridayMorning = parseInt(document.getElementById('fridayMorning').value);
// ramaining minutes in decimal form
var remainingDecimals = (document.getElementById('remainingDecimals').value);
//convert decimal minutes into time format minutes rounded to the nearest whole number
var roundedDecimal = Math.round(remainingDecimals * 60);
//result for current hours worked
var currentWorked = fridayMorning + " hours " + roundedDecimal + " minutes";
var remainingHours = (hoursThisWeek - fridayMorning) - 1;
var remainingMinutes = (60 - roundedDecimal);
var hoursLeftToWork = remainingHours + " hours " + remainingMinutes + " minutes";
//this is to display the current hours worked results
document.getElementById('currentWorked').innerHTML = currentWorked;
//this is to display the remaining hours left results
document.getElementById('hoursLeftToWork').innerHTML = hoursLeftToWork;
}
//Here is where I'm stuck! Do I start by getting the value from this input field?
var clockIn = $('#enterClockIn').val();

Why did you split the friday morning how many hour and decimals into different inputs? makes you write more code that way..
also you need to read the momentjs docs. they are extremely helpful. https://momentjs.com/docs/
Overall, what you had to do was tell moment the friday clock in time format (it would be hh:mm A) and then add the minutes to it
(eg moment("07:00 AM", "hh:mm A").add("90","minutes") will result in 08:30 AM)
Basically:
var clockOutTime = moment(clockedInFri, "hh:mm A").add(remaining + lunchBreak, "minutes");
clockOutTime = clockOutTime.format("hh:mm A");
Here is the full pen: https://codepen.io/nodirashidov/pen/WORMNZ

How to reset JavaScript random number generator

I’ve started my first own JS project.
In the end, I would like to have my own slotmachine.
By now, I’ve the problem, that I don’t know how to restart my program or just the function for generating again and again the new random values.
This is my code until now:
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>Home</li> <!-- bedeutet '#' gleicher Link + Ergänzung?-->
<li>Contact</a></li>
<li>About</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>
As you see, I've to reload the HTML file to click the SPIN-button again to have new randoms.
I think the point is to create a big comprehensive function and call it when the SPIN function ends. But I don't now how to do that ...
What is the missing step, to have as many values as the user wishs to have?
Thanks, Jonas

Simply move the random numbers being generated into the click method.
function randomClickX() {
var randomX1 = Math.ceil(Math.random() * 10 );
var randomX2 = Math.ceil(Math.random() * 10 );
var randomX3 = Math.ceil(Math.random() * 10 );
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>Home</li> <!-- bedeutet '#' gleicher Link + Ergänzung?-->
<li>Contact</a></li>
<li>About</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>