The closest I found researching for what I was looking for is this: Making a confirm box
Unfortunately, I could not make it do exactly what I wanted or I didn't understand. I am new to Java/Javascript and HTML.
I am using Google Scripts to create a custom user interface for, Google Sheets to make capturing the input needed user friendly. I am stuck on trying to include a custom confirm in my validation code. To test it I just created a simple web app with below code: (I created some Psuedo code and commented it out in the myFunction function within the code below)
function doGet(){
var template = HtmlService.createTemplateFromFile('Basic');
return template.evaluate()
.setTitle('Example App')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
.confirmBox {
display: none;
background-color: rgba(0, 0, 0, 0.40);
border: 1px solid #ddd;
position: fixed;
-webkit-transition: -webkit-box-shadow .25s;
transition: -webkit-box-shadow .25s;
transition: box-shadow .25s;
transition: box-shadow .25s, -webkit-box-shadow .25s;
border-radius: 2px;
width: 250px;
left: 50%;
margin-left: -100px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
color: #ffffff;
font-size: 24px;
z-index:99;
}
.confirm .message {
text-align: left;
}
</style>
</head>
<body>
<div id="cfrmBox" class="confirmBox">
<div id="cfrmBoxMsg" class="message"></div>
<button id="idYesButton" class="btn waves-effect waves-light z-depth-5" >Yes</button>
<button id="idNoButton" class="btn waves-effect waves-light z-depth-5" >No</button>
</div>
<div class="container">
<div class="row">
<div class="col s12">
<br><br>
<div class="card">
<div class="card-image">
<span class="card-title">Timer</span>
<a class="btn-floating halfway-fab waves-effect waves-light teal z-depth-5 tooltipped"
data-position="top"
data-tooltip="Press to start and stop timer" onclick="startStopTimer()">
<i id="idStopWatch" class="large material-icons">access_time</i></a>
</div>
<div id ="idCardContent" class="card-content" style="color: #4db6ac;
font-weight: bold;
font-weight: 150%">
<p id = "idCardContentP">04:10:24</p>
</div>
</div>
<button class="btn waves-effect waves-light z-depth-5" id="btnNextTask" onclick="myFunction()">Next Task
<i class="material-icons right">music_note</i>
</button>
</div> <!-- END col END -->
</div> <!-- END row END -->
</div> <!-- END Container -->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script>
<script>
function appearNow(tMessage){
var x = document.getElementById('cfrmBoxMsg');
x.innerHTML = tMessage;
var y = document.getElementById('cfrmBox');
y.style.display = "inline";
}
function myFunction() {
var stTime = document.getElementById('idCardContentP').innerHTML;
if (stTime != "") {
//Had function left in front. Corrected
appearNow('Do you want to save your time for this task?')
// This is where I want to capture if the 'yes' or 'no' button was pressed
//Psuedo code below
/*
if(document.getElementById('idYesButton').click == true){
y.style.display = "none";
M.toast({html: 'You clicked YES and time has been saved and here is the next task'});
} else {
y.style.display = "none";
M.toast({html: 'You clicked NO and we will do nothing'});
}
*/
//Continue with more validation code
} else {
M.toast({html: 'Since the timer has not started you can freely move to the next task'});
}
}
function startStopTimer() {
M.toast({html: 'Timer is hard coded to be greater than 0 for testing!'});
}
</script>
</body>
</html>
I greatly appreciate any help.
It really seems like nested if statements to create one function to do one particular set of validations isn't really workable in this world since once a function is called it has to complete unless the built-in confirm() is called which is practical but ugly. So I had to rethink my logic route and realized to do what I want and have a custom confirm box I can't make it a nice reusable, neat and tidy function. I have to create a separate function for each validation and create a new '
<div id="cfrmBox" class="confirmBox">
' each time I want to use it, with the buttons that call a specific function with the 'onclick' each time specific to that validation. This can, in my opinion, make the code bulky. But, it works.
function doGet(){
var template = HtmlService.createTemplateFromFile('Basic');
return template.evaluate()
.setTitle('Example App')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
.confirmBox {
display: none;
background-color: rgba(0, 0, 0, 0.40);
border: 1px solid #ddd;
position: fixed;
-webkit-transition: -webkit-box-shadow .25s;
transition: -webkit-box-shadow .25s;
transition: box-shadow .25s;
transition: box-shadow .25s, -webkit-box-shadow .25s;
border-radius: 2px;
width: 250px;
left: 50%;
margin-left: -100px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
color: #ffffff;
font-size: 24px;
z-index:99;
}
.confirm .message {
text-align: left;
}
</style>
</head>
<body>
<div id="cfrmBox" class="confirmBox">
<div id="cfrmBoxMsg" class="message"></div>
<button id="idYesButton" class="btn waves-effect waves-light z-depth-5" value="yes" onclick="confirmYesNo(this.value)">Yes</button>
<button id="idNoButton" class="btn waves-effect waves-light z-depth-5" value="no" onclick="confirmYesNo(this.value)">No</button>
</div>
<div id="idContainer" class="container">
<div class="row">
<div class="col s12">
<br><br>
<div class="card">
<div class="card-image">
<span class="card-title">Timer</span>
<a id="idStopWatchBtn" class="btn-floating halfway-fab waves-effect waves-light teal z-depth-5 tooltipped"
data-position="top"
data-tooltip="Press to start and stop timer" onclick="startStopTimer()">
<i id="idStopWatch" class="large material-icons">access_time</i></a>
</div>
<div id ="idCardContent" class="card-content" style="color: #4db6ac;
font-weight: bold;
font-weight: 150%">
<p id = "idCardContentP">04:10:24</p>
</div>
</div>
<div class="row">
<div class="col s12">
<div id="idCardPanel" class="card-panel teal">
<span id="idCardPanelSpan"class="white-text">Task 1: Do something fun
</span>
</div>
</div>
</div>
<button class="btn waves-effect waves-light z-depth-5" id="btnNextTask" onclick="myFunction()">Next Task
<i class="material-icons right">music_note</i>
</button>
</div> <!-- END col END -->
</div> <!-- END row END -->
</div> <!-- END Container -->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script>
<script>
function appearNow(tMessage){
var x = document.getElementById('cfrmBoxMsg');
x.innerHTML = tMessage;
var y = document.getElementById('cfrmBox');
y.style.display = "inline";
}
function myFunction() {
var stTime = document.getElementById('idCardContentP').innerHTML;
if (stTime != "") {
document.getElementById("idStopWatchBtn").classList.add("disabled");
document.getElementById("btnNextTask").classList.add("disabled");
appearNow('Do you want to save your time for this task?')
} else {
document.getElementById('idCardPanelSpan').innerHTML = "Task 2: Do something even funner!";
M.toast({html: 'Since the timer has not started you can freely move to the next task'});
}
}
function startStopTimer() {
M.toast({html: 'Timer is hard coded to be greater than 0 for testing!'});
}
function confirmYesNo(btnValue){
switch (btnValue) {
case "yes":
document.getElementById('idCardContentP').innerHTML = '';
showHideElements('cfrmBox');
M.toast({html: 'You clicked yes.'});
//Since timer is blank it will hit code to move to next task
myFunction();
break;
case "no":
showHideElements('cfrmBox');
M.toast({html: 'You clicked no so nothing happens'});
break;
default:
M.toast({html: 'Oops this should not happen'});
}
document.getElementById("idStopWatchBtn").classList.remove("disabled");
document.getElementById("btnNextTask").classList.remove("disabled");
}
function showHideElements(showHideWhat) {
//Be careful with this function if you start with display block versus inline
var x = document.getElementById(showHideWhat);
if (x.style.display !== "none") {
x.style.display = "none";
} else {
x.style.display = "inline";
}
}
</script>
</body>
</html>
Related
I'd like to do a simple clocks project.
In this project the user has to choose a timezone from combobox and when click one of them, the main time (id=digital-clock) has to change with timezone time.
I've one txt file (zone.txt) which contain all timezones.
This is my code: (it doesn't work here as a snippet).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clockify</title>
<link rel="shortcut icon" href="http://cdn.onlinewebfonts.com/svg/img_461716.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
font: open-sans-serif;
}
a {
text-decoration: none;
color: black;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.dst-btn {
margin-right: 75px;
}
</style>
</head>
<body class="unselectable">
<div class="time-label">
<div id="analog-clock" class="clock" style="margin-left:200px; margin-top: -180px;">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<div id="digital-clock" style="margin-top:-350px;"><span id="time" style="font-size:170px;font-weight:bold;color:#fff;"></span></div>
<br><br><br>
<div class="buttons animate__animated animate__bounceInUp" style="display: inline-block;">
<button type="button" class="btn btn-light btn-lg dst-btn">Alarm</button>
<select onchange="changeTimeZone();" style="padding: 10px;border-radius: 5px;padding-bottom:-2px;width:200px;" class="btn btn-light dst-btn" name="timezone-label" id="timezone-label" aria-required="true">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js "></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js "></script>
<script>
// Load data from file ['Europe/Rome, Europe/Amsterdam, etc.'] into combobox
$.ajax({
url: 'zone.txt',
success: function(data) {
var splitData = data.split("\n");
for(i = 0; i <= splitData.length; i++) {
$('#timezone-label').append("<option id='timezone-label' value='" + splitData[i] + "'>" + splitData[i] + "</option>");
}
}
});
</script>
</select>
<button id="style" type="button" class="btn btn-light btn-lg dst-btn">Style</button>
<button id="stopwatch" type="button " class="btn btn-light btn-lg dst-btn ">Stopwatch</button>
<button type="button" class="btn btn-light btn-lg dst-btn ">Countdown</button>
</div>
</div>
<script>
function changeTimeZone() {
var timeZone = document.getElementById('timezone-label');
const str = new Date().toLocaleString('it-IT', {
timeZone: timeZone
});
var myArray = str.split(",");
document.getElementById("time").innerHTML = myArray[1];
}
</script>
</body>
</html>
I tried to use this code , but it doesn't work :
function changeTimeZone() {
var timeZone = document.getElementById('timezone-label');
const str = new Date().toLocaleString('it-IT', {
timeZone: timeZone
});
var myArray = str.split(",");
document.getElementById("time").innerHTML = myArray[1];
}
I use boostrap 5, jquery and ajax in my project.
In my opinion, the problem is with this line: timeZone: timeZone. How can I do it? I want to set a timezone variable as attribute.
I've this error in javascript console:
Uncaught RangeError: Invalid time zone specified: [object HTMLSelectElement]
at Date.toLocaleString (<anonymous>)
at changeTimeZone (clocks.html:87)
at HTMLSelectElement.onchange (clocks.html:62)
timeZone: timeZone
change to
timeZone: timeZone.value
try => This
Im having trouble trying to do the following:
When I hit the button(the first time), I want it to select the first box and then change the background to grey, and as the button is being pressed, I want it to jump to the next box and change that box into grey. Help Please!
const boxes = document.querySelector('#boxes');
const button = document.querySelector('button');
button.addEventListener('click', () => {
let firstChild = boxes.firstElementChild;
for (let i = 0; i < boxes.length; i++) {
firstChild.nextElementSibling.style.backgroundColor = 'grey';
}
})
body {
background: rgb(78, 78, 78);
}
.boxes {
height: 600px;
width: 380px;
background: rgb(236, 236, 236);
border-radius: 20px;
}
.box {
height: 100px;
background: rgb(26, 149, 187);
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- My CSS -->
<link rel="stylesheet" href="main.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container boxes mt-5">
<h1 class="text-center mb-4">App.js</h1>
<div id='boxes' class="row justify-content-around">
<div class="col-3 box "></div>
<div class="col-3 box "></div>
<div class="col-3 box "></div>
</div>
<div class="row mt-4 justify-content-around">
<div class="col-3 box "></div>
<div class="col-3 box "></div>
<div class="col-3 box "></div>
</div>
<div class="container text-center mt-4">
<button id="button" type="button" class="btn btn-warning">Submit</button>
</div>
</div>
</body>
</html>
This is one way to do it using closures:
const boxes = document.querySelector('#boxes');
const button = document.querySelector('button');
const createListener = () => {
let counter = 0
return () => {
boxes.children[counter %
boxes.children.length].style.backgroundColor = 'gray'
counter++
}
}
button.addEventListener('click', createListener())
I did not test it but it should work. If you don't understand what's going on please research on closures. It'll be very useful.
I have a html form and one 'submit' button. I have two tabs that I want to do different things. One tab when submitting should go to one link, whereas the other tab should take the form to another link.
Here is my fiddle to show what I am working with :
https://jsfiddle.net/4s8qevz7/
I have tried putting in actions to go to for, (as of right now) generic links. But no luck.
<form style="margin-top:40px;" id="search-box" action="">
<div class="search-tab" data-search-type="catalog" action="http://catalog.com/" onClick="changePlaceholder(this)">Catalog </div>
<div class="search-tab selected" data-search-type="website" action="https://www.google.com/"onClick="changePlaceholder(this)">Website </div>
My expected results would be depending on the active tab, the form would respect that when the go button is clicked.
1) call preventDefault() in the form submit method
2) get active tab from event.target
3) call form.submit with the correct options based on the active tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tab {
overflow: hidden;
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: #f1f1f1;
float: left;
border: solid 1px #ccc;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
#search-text-form{
margin-top: 2rem;
}
#current-action-section{
margin-top: 2rem;
}
</style>
<script>
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</head>
<body>
<section id="search-bar">
<div class="tab">
<button id="openByDefault" class="tablinks" onclick="openTab(event, 'Catalog')" data-action="http://catalog.com">Catalog</button>
<button class="tablinks" onclick="openTab(event, 'Website')" data-action="https://www.google.com">Website</button>
</div>
<div id="Catalog" class="tabcontent">
<h3>Catalog</h3>
<p>Catalog</p>
</div>
<div id="Website" class="tabcontent">
<h3>Website</h3>
<p>Website</p>
</div>
<form id="search-text-form">
<input type="text" id="search-text" placeholder="Search Website"><button id="go">Submit</button>
</form>
<script>
const form = document.getElementById('search-text-form');
form.onsubmit = e => {
e.preventDefault();
const activeTab = document.getElementsByClassName('tablinks active')[0];
const {action } = activeTab.dataset;
console.log(action);
document.getElementById('current-action').innerHTML = `Current Action: ${action}`;
// when you're ready, call whatever api is usually called in the submit function
}
document.getElementById("openByDefault").click();
</script>
</section>
<section id="current-action-section">
<h3 id="current-action"></h3>
</section>
<script>
var emailAddress = "jimmyleespann#outlook.com";
//email;
var text = "https://docs.google.com/forms/d/e/1FAIpQLSdFDFGDFVDGGjdfgdfgdx8P4DOw/viewform?usp=pp_url&entry.745541291="+room+"&entry.1045781291="+rr+"&entry.1065046570=4&entry.1166974658="+hr+"&entry.839337160="+spO2+"&entry.103735076=&entry.515842896="+e1Name+"&entry.631828469="+e1Reps+"&entry.1814472044="+e2Name+"&entry.905508655="+e2Reps+"&entry.1234390406="+isVol+"&entry.197252120="+education+"&entry.1748983288="+notes; var message = 'Dear ' + patientName + '\n\n' + "Thank you for submitting.\n\nHere is an autofill link: " + text; var subject = 'Submission Confirmation'; GmailApp.sendEmail(emailAddress, subject, message);
</script>
</body>
</html>
Updated JSFiddle code that I couldn't get to show up for OP:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
const state = {
targetUrl: 'https://www.google.com' // because this is the default selected tab
}
function setTargetUrl(url){
state.targetUrl = url;
}
function changePlaceholder(div) {
const searchTextEl = document.getElementById("search-text")
searchTextEl.placeholder = `Search ${div.innerHTML.trim()}`;
setTargetUrl(div.dataset.action);
}
function doSubmit(){
console.log('submitForm', state);
}
</script>
</head>
<body>
<form style="margin-top:40px;" id="search-box" onsubmit="submitForm">
<div
class="search-tab"
data-search-type="catalog"
data-action="http://catalog.com/"
onclick="changePlaceholder(this)">
Catalog
</div>
<div
class="search-tab selected"
data-search-type="website"
data-action="https://www.google.com/"
onclick="changePlaceholder(this)">
Website
</div>
<script>
</script>
<a href="t$003f/" target="_blank" style="text-decoration:none">
<div class="search-tab-link"> Login </div>
</a>
<div class="search-tab-content">
<div class="search-bar">
<input type="text" id="search-text" placeholder="Search Website" name="q">
<span id="search-text-icon" onclick="doSubmit()" style="cursor:pointer;">
<img
alt="go"
title="Search"
src="img/search.png"
style="height:1.2rem;"
>
</span>
</div>
<div id="search-old-catalog">
<a href="http://.com/" target="_blank">
Old Catalog
</a>
</div>
</form>
</body>
</html>
I couldn't get your jsfiddle to work, but here's an example of "2 actions within one form, one button." If the checkbox is checked, the action goes to bing.com, otherwise it goes to Wikipedia. Your if statement can use currentTarget as Dov Rine suggested, instead of a checkbox to dynamically change the form action.
function ActionSelect() {
if (document.getElementById('bing').checked) {
document.getElementsByTagName('form')[0]['action'] = 'https://bing.com';
}
}
<form style="margin:40px 50px;" action="https://www.wikipedia.org">
Choose your form action:<br/>
<input type="checkbox" id="bing"> Bing
<p>
<button type="submit" onclick="ActionSelect()">Submit</button>
</p>
</form>
In my Collapsible header I am trying to append an extra anchor tag which is pushed away from the header because this is not supported for JQuery mobile headers. Is there a way to add an extra link/action to the heading of a Collapsible in a neath way?
Thanks in advance
You can inject a button inside the collapsible from the $(document).on("collapsiblecreate") event, but I prefer to use pre-enhanced markup as described here (this should improve performance during page creation).
Here is an example (I believe everybody who is using JQM had such a problem at least one time...)
So, basically, instead of relying completely to the data-role enhancement, You need to write in Your html the expanded markup and the classes which JQM would add later during the widget initialization. To tell JQM that the markup is pre-enhanced add the data-enhanced="true" data-attribute to the widget.
This way, You are free to add whichever element You want inside any widget (search-inputs & so on). Just look inside the chrome developer tools: mostly, You will only need to copy-and-paste the markup enhanced by JQM using its own standard method and use that in Your html page.
$(document).on("collapsiblecreate", ".ui-collapsible", function(e) {
/* $(this) is the collapsible */
});
.collapsible-assist {
position: relative;
}
.collapsible-assist .ui-collapsible-heading {
margin-right: 2.5em;
}
.collapsible-assist.square .ui-collapsible-heading {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.collapsible-assist .assist-btn {
position: absolute;
right: 0;
}
.collapsible-assist.square .assist-btn {
margin: 0;
border-bottom-right-radius: inherit;
border-top-right-radius: inherit;
}
.collapsible-assist .ui-collapsible-content {
margin-top: -1px !important;
border-top-width: 1px !important;
border-top-right-radius: inherit;
}
/* JQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
text-shadow: none !important;
}
.ui-btn:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
/* Speed-up some android & iOS devices */
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<div data-role="collapsible" data-enhanced="true" class="collapsible-assist square ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-corner-all ui-collapsible-collapsed">
Help
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">Farm animals<div class="ui-collapsible-heading-status">click to expand contents</div></h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<ul data-role="listview" data-enhanced="false">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div>
</div>
<br>
<div data-role="collapsible" data-enhanced="true" class="collapsible-assist round ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-corner-all ui-collapsible-collapsed">
Help
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">Legend<div class="ui-collapsible-heading-status">click to expand contents</div></h4>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
<form>
<div data-role="controlgroup">
<input name="checkbox-1-a" id="checkbox-1-a" type="checkbox" checked>
<label for="checkbox-1-a">One</label>
<input name="checkbox-2-a" id="checkbox-2-a" type="checkbox">
<label for="checkbox-2-a">Two</label>
<input name="checkbox-3-a" id="checkbox-3-a" type="checkbox">
<label for="checkbox-3-a">Three</label>
</div>
</form>
</div>
</div>
</div>
<div data-role="popup" id="popup" class="ui-content" data-theme="a">
<p>I'm a help popup.</p>
</div>
</div>
</body>
</html>
Im trying to make a clicker game, and when the clicks reach a certain number, something happens. Nothing happens. Any ideas as to why the if statement I added isnt doing anything when reaching the number of ten clicks?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clicker</title>
<script src="counter.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js" integrity="VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
<style>
body{
text-align: center;
background-image: url("https://gift-frog.com/wp-content/uploads/2016/06/off-white-textured-background-1920x10803.jpg");
}
h1{
font-size: 100px;
color: #372424;
}
h3{
color: #372424;
}
h2{
color: #372424;
}
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body id="body" onclick="doClick()">
<nav class="navbar navbar-dark navbar-inverse">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
☰
</button>
<div class="collapse" id="exCollapsingNavbar">
<div class="bg-inverse p-a-1">
<h4>Your Statistics</h4>
<span class="text-muted">graph in development</span>
<br>
<h4>Rank</h4>
<progress class="progress progress-success" value="bob" max="500"></progress>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<h1 class="unselectable">Clicked <h1 class="unselectable" id="counter">0</h1></h1> <h1 class="unselectable">times</h1>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</body>
</html>
Here is the javascript for it.
/**
* Created by Illuminati on 9/8/2016.
*/
var clicks = 0;
var multiplyer = 0;
function doClick() {
clicks = clicks + 1;
var theCounter = document.getElementById('counter');
theCounter.textContent = clicks;
}
if(clicks == 10){
alert("test");
}
Move the conditional to inside the function. Outside of it, it's only being read on page load where it is always false.
The if block you have only ever runs once, but your event handler runs whenever the user click on the button.
Something like this:
function doClick() {
clicks += 1;
var theCounter = document.getElementById('counter');
theCounter.textContent = clicks;
if(clicks == 10){
alert("test");
}
}
Also instead of doing, counter = counter + 1 you could also use, clicks += 1 which is the exact same thing.