I'm building a social media website and I'm getting this error with my code when users type in to add a new post it'll show up and stay is there a way to fix this issue? I've been dealing with this for several days and can't figure it out. My friend can't figure it out either what are we doing wrong.
var main = function() {
$('.btn').click(function() {
var post = $('.status-box').val();
$('<li>').text(post).prependTo('.posts');
$('.status-box').val('');
$('.counter').text('140');
$('.btn').addClass('disabled');
});
$('.status-box').keyup(function() {
var postLength = $(this).val().length;
var charactersLeft = 140 - postLength;
$('.counter').text(charactersLeft);
if(charactersLeft < 0) {
$('.btn').addClass('disabled');
}
else if(charactersLeft == 140) {
$('.btn').addClass('disabled');
}
else {
$('.btn').removeClass('disabled');
}
});
$('.btn').addClass('disabled');
}
$(document).ready(main);
html,
body {
font-family: 'Roboto', sans-serif;
color: #404040;
background-color: #eee;
}
.container {
width: 520px;
margin-top: 20px;
}
.button-group {
margin-bottom: 20px;
}
.counter {
display: inline;
margin-top: 0;
margin-bottom: 0;
margin-right: 10px;
}
.posts {
clear: both;
list-style: none;
padding-left: 0;
width: 100%;
}
.posts li {
background-color: #fff;
border: 1px solid #d8d8d8;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin-bottom: 10px;
word-wrap: break-word;
min-height: 42px;
}
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="Blurt to friends?..."></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Blurt
</div>
<ul class="posts">
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
Related
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);
Good day to you all,Please can anyone help me with this problem ? I am new to front end and over sometime now I have been trying to fix the white spaces below my footer in mobile view with resources on this site but I couldn't get any that works with it. I will be grateful if anyone can help me with this
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
document.querySelectorAll('ul.nav-links li').forEach(element => element.addEventListener('click', () => {
document.querySelector('ul.nav-links').classList.remove('nav-active');
}));
}
navSlide();
window.addEventListener("DOMContentLoaded", function() {
// get the form elements defined in your form HTML above
var form = document.getElementById("my-form");
//var button = document.getElementById("my-form-button");
var status = document.getElementById("satus");
// Success and Error functions for after the form is submitted
function success() {
form.reset();
status.classList.add('success');
status.innerHTML = "Thanks!";
}
function error() {
status.classList.add('error');
status.innerHTML = "Oops! There was a problem.";
}
// handle the form submission event
form.addEventListener("submit", function(ev) {
ev.preventDefault();
var data = new FormData(form);
ajax(form.method, form.action, data, success, error);
});
});
// helper function for sending an AJAX request
function ajax(method, url, data, success, error) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState !== XMLHttpRequest.DONE) return;
if (xhr.status === 200) {
success(xhr.response, xhr.responseType);
} else {
error(xhr.status, xhr.response, xhr.responseType);
}
};
xhr.send(data);
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
h6 {
font-family: silka;
font-weight: 700;
font-size: 24px;
margin-left: 20px;
padding-top: 50px;
}
.contact-us h3 {
margin-left: 20px;
}
}
img {
margin: 10px;
width: 90%;
border-radius: 4px;
}
body {
background: #ffffff;
}
form {
max-width: 70.5%;
margin: 10px auto;
}
.feedback-input {
color: black;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 12px;
border-radius: 2px;
line-height: 11px;
background-color: transparent;
border: 2px solid #220077;
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width: 100%;
box-sizing: border-box;
outline: 0;
}
.feedback-input:focus {
border: 2px solid #220077;
}
textarea {
height: 150px;
line-height: 150%;
resize: vertical;
}
[type="submit"] {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
width: 50%;
background: #220077;
border-radius: 5px;
border: 0;
cursor: pointer;
color: white;
font-size: 12px;
padding-top: 10px;
padding-bottom: 10px;
transition: all 0.3s;
margin-top: -4px;
font-weight: 350;
}
[type="submit"]:hover {
background: #007722;
}
.foot {
font-family: silka;
font-weight: 300;
font-size: 14px;
margin-left: 10px;
}
.fab {
padding: 10px;
font-size: 13px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px 10px 10px;
border-radius: 50%;
background: #fff;
}
.fab:hover {
background-color: #007722;
;
}
.fa-facebook {
background: #fff;
text-decoration: none;
}
.fa-twitter {
background: #fff;
text-decoration: none;
}
.fa-linkedin-in {
background: #fff;
text-decoration: none;
}
.fa-github {
background: #fff;
text-decoration: none;
}
footer {
font-family: silka;
width: 100%;
height: 20vh;
bottom: 0;
background-color: #007722;
}
footer .a {
padding-top: 5px;
}
<!-- Fontawesome -->
<script src="https://kit.fontawesome.com/50d8f330a2.js" crossorigin="anonymous"></script>
<!-- Body -->
<div class="container">
<nav>
<ul class="nav-links">
<li>About</li>
<li>Projects</li>
<li>Get in touch</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<section class="intro">
<h1>Let's find the solution that best fits you...</h1>
</section>
<section class=portfolio>
<p>Hello, I'm David, a designer and developer from Lagos. My dream is to build solutions for global problem, while providing for young people a place to learn and explore their naturally creative side. </p>
</section>
<a name="container-frames"></a>
<div class="container-frames">
<h6>Selected works</h6>
<div class="column">
<a href="https://532services.ng" target="_blank">
<img src="532serv.jpg" height="188" alt="ecommerce"></a>
<h5>Preorder site</h5>
</div>
<div class="column">
<a href="https://1drv.ms/u/s!AgmcHhJeK0Xow14h3ARPShMs_Ado?e=e4Yp1c" target="_blank">
<img src="ttsunity.jpg" height="188" alt="ecommerce"></a>
<h5>Mobile game APK</h5>
</div>
<div class="column">
<a href="https://www.figma.com/files/recent" target="_blank">
<img src="Lambdap.png" height="188" alt="design"></a>
<h5>UI designs</h5>
</div>
</div>
<a name="contact-us"></a>
<section class="contact-us">
<h3>Get in touch</h3>
<form action="https://formspree.io/f/xnqorqrg" method="POST" id="my-form">
<input name="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" type="text" class="feedback-input" placeholder="Email" />
<textarea name="text" class="feedback-input" placeholder="Enter Message"></textarea>
<button type="submit">SUBMIT</button>
</form>
<div id="status"></div>
</section>
</div>
<footer>
<p class="foot">©2021 - David B. Abel</p>
</footer>
The solution is in your css (height: 265vh is to much):
.nav-links {
height: 100vh;
}
Try to set lower height like me above.
If you want to have nav all the time on your page try to change position: absolute to fixed
.nav-links {
position: fixed;
}
I am new to web development and am trying to make a chat interface as a mini project. So, I am testing whether the messages can be displayed in the chat history window. I wrote the code in such a way that when I click the send button(even without typing anything in textbox) , the chat history must add a message for itself.
To do this, I have put a template for every new message. And when send is clicked, I am trying to add it through appendChild(). But, when I am clicking the send button, the new message stays for a fraction of second and disappears. You can say, it blinks. But I want it to be visible completely. Is my way of doing it wrong or is there a better and easy way to do it.
I have read that using innerHTML will have some side-effects and I have no knowledge about jQuery. So, please answer with that perspective.
Other suggestions regarding my coding style are also appreciated.
<html>
<head>
<style>
#message {
-webkit-border-radius: 15px;
float: bottom;
position: fixed;
max-width: 400px;
background: blue;
word-wrap: break-word;
}
#sender {
text-align: left;
padding-left: 20px;
padding-top: 5px;
font-family: Arial;
font-weight: bold;
color: white;
}
#text {
text-align: left;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
}
#time {
text-align: right;
padding-right: 15px;
font-size: 15px;
}
#nav {
height: 10%;
margin: 0px;
padding: 0px;
background: blue;
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#nextwhole {
-webkit-orient: horizontal;
}
#navbar {
width: 25%;
background: green;
height: 90%;
float: left;
}
#msgchat {
width: 75%;
height: 100%;
position: relative;
float: right;
}
#messages {
background: orange;
height: 80%;
width: 100%;
}
#chatint {
background: red;
height: 10%;
width: 100%;
}
#chattext {
width: 90%;
height: 90%;
}
#send {
width: 9.5%;
height: 90%;
}
</style>
<script>
function submitfun() {
if ('content' in document.createElement('template')) {
var t = document.querySelector('#msgtemplate');
var td = t.content.querySelectorAll("p");
td[0].textContent = "user";
td[1].textContent = "this is message";
td[2].textContent = "time";
var tb = document.querySelector("#messages");
var clone = document.importNode(t.content, true);
tb.appendChild(clone);
}
}
</script>
</head>
<body>
<div id="nav">
</div>
<div id="nextwhole">
<div id="navbar"></div>
<div id="msgchat">
<div id="messages">
</div>
<div id="chatint">
<form onsubmit="submitfun()">
<input type="text" id="chattext">
<input type="submit" id="send" value="SEND">
</form>
</div>
</div>
</div>
<template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>
</body>
</html>
Because you're making use of a <form>, it attempts to submit the form by default.
To prevent this, you need to update your onsubmit to also pass the event:
<form onsubmit="submitfun(event)">
And prevent the default behaviour with:
function submitfun(e) {
e.preventDefault();
...
This can be seen in the following:
function submitfun(e) {
e.preventDefault();
if ('content' in document.createElement('template')) {
var t = document.querySelector('#msgtemplate');
var td = t.content.querySelectorAll("p");
td[0].textContent = "user";
td[1].textContent = "this is message";
td[2].textContent = "time";
var tb = document.querySelector("#messages");
var clone = document.importNode(t.content, true);
tb.appendChild(clone);
}
}
#message {
-webkit-border-radius: 15px;
float: bottom;
position: fixed;
max-width: 400px;
background: blue;
word-wrap: break-word;
}
#sender {
text-align: left;
padding-left: 20px;
padding-top: 5px;
font-family: Arial;
font-weight: bold;
color: white;
}
#text {
text-align: left;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
}
#time {
text-align: right;
padding-right: 15px;
font-size: 15px;
}
#nav {
height: 10%;
margin: 0px;
padding: 0px;
background: blue;
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#nextwhole {
-webkit-orient: horizontal;
}
#navbar {
width: 25%;
background: green;
height: 90%;
float: left;
}
#msgchat {
width: 75%;
height: 100%;
position: relative;
float: right;
}
#messages {
background: orange;
height: 80%;
width: 100%;
}
#chatint {
background: red;
height: 10%;
width: 100%;
}
#chattext {
width: 90%;
height: 90%;
}
#send {
width: 9.5%;
height: 90%;
}
<body>
<div id="nav"></div>
<div id="nextwhole">
<div id="navbar"></div>
<div id="msgchat">
<div id="messages">
</div>
<div id="chatint">
<form onsubmit="submitfun(event)">
<input type="text" id="chattext">
<input type="submit" id="send" value="SEND">
</form>
</div>
</div>
</div>
<template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>
</body>
Ideally you should not submit the form.
Try something like below
<html>
<head>
<style>
#message {
-webkit-border-radius: 15px;
float: bottom;
position: fixed;
max-width: 400px;
background: blue;
word-wrap: break-word;
}
#sender {
text-align: left;
padding-left: 20px;
padding-top: 5px;
font-family: Arial;
font-weight: bold;
color: white;
}
#text {
text-align: left;
font-size: 18px;
padding-left: 20px;
padding-right: 20px;
}
#time {
text-align: right;
padding-right: 15px;
font-size: 15px;
}
#nav {
height: 10%;
margin: 0px;
padding: 0px;
background: blue;
}
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
#nextwhole {
-webkit-orient: horizontal;
}
#navbar {
width: 25%;
background: green;
height: 90%;
float: left;
}
#msgchat {
width: 75%;
height: 100%;
position: relative;
float: right;
}
#messages {
background: orange;
height: 80%;
width: 100%;
}
#chatint {
background: red;
height: 10%;
width: 100%;
}
#chattext {
width: 90%;
height: 90%;
}
#send {
width: 9.5%;
height: 90%;
}
</style>
<script>
function submitfun() {
if ('content' in document.createElement('template')) {
var t = document.querySelector('#msgtemplate');
var td = t.content.querySelectorAll("p");
td[0].textContent = "user";
td[1].textContent = "this is message";
td[2].textContent = "time";
var tb = document.querySelector("#messages");
var clone = document.importNode(t.content, true);
tb.appendChild(clone);
}
}
</script>
</head>
<body>
<div id="nav">
</div>
<div id="nextwhole">
<div id="navbar"></div>
<div id="msgchat">
<div id="messages">
</div>
<div id="chatint">
<form onsubmit="javascript:return false;">
<input type="text" id="chattext">
<input type="submit" id="send" value="SEND" onclick="submitfun();">
</form>
</div>
</div>
</div>
<template id="msgtemplate">
<div id="message">
<p id="sender"></p>
<p id="text"></p>
<p id="time"></p>
</div>
</template>
</body>
</html>
I want to add somethin y input in my ol, i do it,
when i write something in input filed and click add
i create li, then i want to add to li data attribute
which will increment, when will create new li in the picture there is a code[1]: https://i.stack.imgur.com/oAr6V.png
this is what i tried so far (data-id is not adding to newlt created li's):-
$(".add").click(function() {
var $val = $(".taskk");
var value = $val.val();
if(value === "") {
$(".error").text("Fill in the task");
} else {
$(".error").text("");
var newLi = $('<li>' + value + '</li>');
$('.toDo ol').append((newLi));
/*newLi.each(function() {
$(this).attr("data-id", i++);
console.log(i++);
$('.toDo ol').append((newLi));
});
$('.toDo ol').append((newLi)); */
}
})
body {
background-color: #34545E;
}
.wrapper {
max-width: 1200px;
width: 100%;
margin: auto;
}
.flexbox {
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.box {
min-width: 280px;
min-height: 250px;
border: 2px solid transparent;
background-color: grey;
}
h1 {
text-align: center;
background-color: aliceblue;
padding: 5px;
}
form {
display: flex;
flex-direction: column;
margin-top: 40px;
}
input[type="text"] {
height: 80px;
}
input[type="button"], button {
padding: 10px;
width: 100px;
margin-top: 20px;
background-color: #000;
border: 1px solid transparent;
color: #fff;
font-weight: bold;
cursor: pointer;
}
ol {
list-style-position: inside;
}
ol li {
padding: 7px;
margin-top: 2px;
word-wrap: break-word;
}
.toDo ol li {
background-color: #ffffff;
}
.compl ol li {
background-color: #F35369;
}
.draft ol li {
background-color: #ffffff;
color: grey;
opacity: 0.8;
text-decoration: line-through;
}
.delete {
background-color: #000000;
}
.error {
padding-top: 20px;
color: red;
}
.add {
padding: 20px;
background-color: black;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="flexbox">
<div class="box1">
<h1>To do list</h1>
<div class="box toDo">
<ol>
</ol>
</div>
</div>
<div class="box2">
<h1>Drafts</h1>
<div class="box draft">
<ol>
</ol>
</div>
<button type="submit">Delete</button>
</div>
<div class="box3">
<h1>Add a task</h1>
<div class="box">
<p class="error"></p>
<form action="" method="post">
<input type="text" name="name" placeholder="Description" class="taskk">
<input type="button" name="add" value="Add task" class="add">
</form>
</div>
</div>
</div>
</div>
You can do it like below:-
check pre-existing li length and add 1 to it and add it as data-id of newly created li
var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');// check pre-existing `li` length and add 1 to it and add it as data-id of newly created `li`
Working snippet:-
$(".add").click(function() {
var $val = $(".taskk");
var value = $val.val();
if(value === "") {
$(".error").text("Fill in the task");
} else {
$(".error").text("");
var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');
$('.toDo ol').append((newLi));
}
});
body {
background-color: #34545E;
}
.wrapper {
max-width: 1200px;
width: 100%;
margin: auto;
}
.flexbox {
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.box {
min-width: 280px;
min-height: 250px;
border: 2px solid transparent;
background-color: grey;
}
h1 {
text-align: center;
background-color: aliceblue;
padding: 5px;
}
form {
display: flex;
flex-direction: column;
margin-top: 40px;
}
input[type="text"] {
height: 80px;
}
input[type="button"], button {
padding: 10px;
width: 100px;
margin-top: 20px;
background-color: #000;
border: 1px solid transparent;
color: #fff;
font-weight: bold;
cursor: pointer;
}
ol {
list-style-position: inside;
}
ol li {
padding: 7px;
margin-top: 2px;
word-wrap: break-word;
}
.toDo ol li {
background-color: #ffffff;
}
.compl ol li {
background-color: #F35369;
}
.draft ol li {
background-color: #ffffff;
color: grey;
opacity: 0.8;
text-decoration: line-through;
}
.delete {
background-color: #000000;
}
.error {
padding-top: 20px;
color: red;
}
.add {
padding: 20px;
background-color: black;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="flexbox">
<div class="box1">
<h1>To do list</h1>
<div class="box toDo">
<ol>
</ol>
</div>
</div>
<div class="box2">
<h1>Drafts</h1>
<div class="box draft">
<ol>
</ol>
</div>
<button type="submit">Delete</button>
</div>
<div class="box3">
<h1>Add a task</h1>
<div class="box">
<p class="error"></p>
<form action="" method="post">
<input type="text" name="name" placeholder="Description" class="taskk">
<input type="button" name="add" value="Add task" class="add">
</form>
</div>
</div>
</div>
</div>
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>