We Keep Coding

javascript toggle not working whenclicked but css works when a button is hovered over

I want a button to display some text when clicked. the button is changing color when i hover over it but its not displaying text when clicked here tis the css and javascript.
css:
button {
background-color: #f2c33c;
font-size: 20px;
color: #000000;
padding: 10px;
border-radius: 10px;
border: 3px solid #808080
}
button:hover {
background-color: #7cc272;
color: #333333;
}
.hidden {
display: none;
}
.showing {
display: block;
font-family: Arial, sans-serif;
background-color: #509fcb;
color: #000000;
width: 400px;
padding: 20px;
margin-top: 20px;
border-radius: 20px;
}
js:
document.querySelector(".clickme").addEventListener("click", () => {
document.querySelectorAll(".hidden").forEach((item) => {
item.classList.toggle(".showing");
});
});

You dont need to specify the . on the class that your toggeling.
So your code would look like this:
document.querySelector(".clickme").addEventListener("click", () => {
document.querySelectorAll(".hidden").forEach((item) => {
item.classList.toggle("showing");
});
});

How to highlight the input button by clicking to a button?

I can't code jquery javascript therefore i have no idea how to highlight (border or background change) the submit button for a few seconds. I tried some of the scripts that have been shared on this platform but i wasn't lucky. What code do you suggest?
The button i need to highlight is submitbtn
and the button that needs to highlight it by click is eventbtn
I appreciate the help
Thanks
Edited: I Want to add class to the submit button once the button is clicked
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.submitbtn {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="submitbtn" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"> <<<<<<<<<<< </button>
</div>
h

The key is to remove the highlighting after a few seconds, this can be done with setTimeout() function:
function highlight(id)
{
clearTimeout(highlight.timer);
const el = document.getElementById(id);
//highlight the button
el.classList.add("highlighted");
//remove highlight after 3sec
highlight.timer = setTimeout(() => el.classList.remove("highlighted"), 3000);
}
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
/* added */
.highlighted
{
box-shadow: 0 0 2em 1px red;
}
.wpcf7-submit {
transition: box-shadow 0.2s;
}
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight" onclick="highlight('form-submit')"> <<<<<<<<<<< </button>
</div>

Do you mean highlight submitbtn when clicking eventbtn?
Add a js to handle the click event, and then add highlight class to submitbtn.
var eventbtn = document.getElementById('highlight');
var submitbtn = document.getElementsByClassName('submitbtn')[0];
eventbtn.addEventListener('mousedown', function () {
submitbtn.classList.add('highlight');
});
eventbtn.addEventListener('mouseup', function () {
submitbtn.classList.remove('highlight');
});
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.submitbtn {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
.highlight {
background-color: #8beccc;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="submitbtn" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"> <<<<<<<<<<< </button>
</div>

Simply add a class to the element you want to highlight. Then remove the class with the setTimeout function.
Add a class in CSS with a high specificity that contains all visible changes you want to apply. It does not matter what it is. It can be background, border, box-shadow...
In JS use an eventListener to listen to click-events on the button.
Apply the class you have specified in CSS with classList.add().
Add a setTimeout function to remove the class after a specified time with classList.remove()
Vanilla JavaScript:
// button element that will be clicked
var button = document.querySelector('button[class="eventbtn"]'),
// element that should be highlighted
input = document.querySelector('#form-submit'),
// timer in ms
timer = 2000;
// eventListener to execute the script on button click
button.addEventListener('click', function() {
// adds a class to apply CSS changes for the highlighting
input.classList.add('highlight');
// timeout function
setTimeout(function() {
// removes the class after the timer has been reached
input.classList.remove('highlight');
}, timer);
})
#form-submit.highlight {
background-color: yellow;
}
/* original CSS */
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"><<<<<<<<<<<</button>
</div>
jQuery:
// button element that will be clicked
var $button = $('button[class="eventbtn"]'),
// element that should be highlighted
$input = $('#form-submit'),
// timer in ms
timer = 2000;
//Eventlistener looking for a click event
$button.click(function() {
//adds a class for highlighting
$input.addClass('highlight');
//timeout function
setTimeout(function() {
//removes class for highlighting
$input.removeClass('highlight');
}, timer);
})
#form-submit.highlight {
background-color: yellow;
}
/* original CSS */
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"><<<<<<<<<<<</button>
</div>

I tryed to answer with pure css by using animation and keyframes. My attempt only works the first time and once everytime after you change the target.
(Note that I'm not used to these properties so there may be a better way to do this)
#form-submit{
background-color: transparent;
}
#keyframes changeBackground {
0% {
background-color: orange;
}
99.999% {
background-color: orange;
}
100% {
background-color: transparent;
}
}
#form-submit:target{
animation: changeBackground 1s;
}
<input type="submit" value="submit" id="form-submit" />
highlight
<br>
change target

Popup copied from one Google Doc Doesn't Popup when Copied

I'm prompting a user for information in a google doc via the Script Editor, and I've gotten it to work in a test document, but when I try to copy it over to another it doesn't pop up.The first one didn't require a developer key to work, although I set it up in my Google Cloud Platform console as part of troubleshooting. It's supposed to push a popup form when the user opens the google doc, but in the second document nothing shows up unless you hit Run. The user should not be accessing the Script Editor, so this is not ideal.
Any ideas on why this is happening? Thanks in advance
function onOpen() {
showPicker();
}
var VALUE;
function showPicker() {
var html = HtmlService.createHtmlOutputFromFile("login.html");
DocumentApp.getUi().showModalDialog(html, " ");
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145078782-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-145078782-1');
</script>
<style>
header {
background: black;
padding: 10px 20px;
}
header h1, header a {
margin: 0px;
text-decoration: none;
color: white;
}
body {
margin: 0;
padding: 0;
background-size: cover;
font-family: sans-serif;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 25rem;
padding: 2.5rem;
box-sizing: border-box;
border: 1px solid #dadce0;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.box h2 {
margin: 0px 0 -0.125rem;
padding: 0;
color: #fff;
text-align: center;
color: #202124;
font-family: 'Google Sans','Noto Sans Myanmar UI',arial,sans-serif;
font-size: 24px;
font-weight: 400;
}
.box p {
font-size: 16px;
font-weight: 400;
letter-spacing: .1px;
line-height: 1.5;
margin-bottom: 25px;
text-align: center;
}
.box .inputBox {
position: relative;
}
.box .inputBox input {
width: 93%;
padding: 0.625rem 10px;
font-size: 1rem;
letter-spacing: 0.062rem;
margin-bottom: 1.875rem;
border: 1px solid #ccc;
background: transparent;
border-radius: 4px;
}
.box .inputBox label {
position: absolute;
top: 0;
left: 10px;
padding: 0.625rem 0;
font-size: 1rem;
color: grey;
pointer-events: none;
transition: 0.5s;
}
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label,
.box .inputBox input:not([value=""]) ~ label {
top: -1.125rem;
left: 10px;
color: #1a73e8;
font-size: 0.75rem;
background-color: white;
height: 10px;
padding-left: 5px;
padding-right: 5px;
}
.box .inputBox input:focus {
outline: none;
border: 2px solid #1a73e8;
}
.box input[type="submit"] {
border: none;
outline: none;
color: #fff;
background-color: #1a73e8;
padding: 0.625rem 1.25rem;
cursor: pointer;
border-radius: 0.312rem;
font-size: 1rem;
float: right;
}
.box input[type="submit"]:hover {
background-color: #287ae6;
box-shadow: 0 1px 1px 0 rgba(66,133,244,0.45), 0 1px 3px 1px rgba(66,133,244,0.3);
}
.popup-without-close .ui-dialog .ui-dialog-titlebar .ui-button.ui-dialog-titlebar-close {
display: none;
}
</style>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<script>
function SubForm() {
$.ajax({
url:'https://api.apispreadsheets.com/data/10050/',
type:'post',
data:$("#myForm").serializeArray()
});
closeDialog();
}
var x = document.getElementById("myForm");
function closeDialog() {
x.closeDialog();
}
</script>
</head>
<body>
<div class="box">
<h2>Sign in</h2>
<p>Use your Provided Credentials</p>
<form id="myForm">
<div class="inputBox">
<input type="email" name="email" required onkeyup="this.setAttribute('value', this.value);" value="">
<label>Username</label>
</div>
<div class="inputBox">
<input type="text" name="password" required onkeyup="this.setAttribute('value', this.value);" value="">
<label>Password</label>
</div>
<button onclick="SubForm()" id="submit">Submit</button>
</form>
</div>
</body>
</html>

It looks like you need an Installed trigger
In a nutshell, simple triggers, like using onOpen without installing it, can be copied with the sheet and it will work "out the box". However, they are very restricted and so, this is why it won't have access to the UI, i.e. a popup.
To install the trigger on the new sheet, you need to open the script editor. Once you are at the editing screen, to the left, click on the triggers icon.
Once there, you can:
It will ask you what function you want to run when the trigger is triggered, and what type of trigger you want it to be (choose onOpen) - then it will likely ask for authorization, which you should grant.
For more details:
Simple triggers
Installable triggers

How to enable Froala editor inside the wrapper div?

I'm trying to apply Froala editor on the button tag. But I want it to open using the wrapper div click. I've added the two demos on this question, please check and anyone is knowing the solutions, please help me.
Demo1:
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
button.on("click", function(){
new FroalaEditor('#editor', {
events: {
contentChanged: function () {
console.log ('content changed....');
}
}
});
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://cdn.jsdelivr.net/npm/froala-editor#3.0.5/js/froala_editor.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/froala-editor#3.0.5/css/froala_editor.pkgd.min.css" rel="stylesheet"/>
<div id="banner-message">
<p>Hello World</p>
<button id="editor">Change text</button>
</div>
This first snippet will open the buttontext in popup to edit on second click.
Demo2:
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
banner.on("click", function(){
new FroalaEditor('#editor', {
events: {
contentChanged: function () {
console.log ('content changed');
}
}
})
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<link href="https://cdn.jsdelivr.net/npm/froala-editor#3.0.5/css/froala_editor.pkgd.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/froala-editor#3.0.5/js/froala_editor.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button id="editor">Change color</button>
</div>
Here in the second demo, I've used the wrapper click event to initialize the froala editor.
My Need: On the click of banner-message div I want to open the froala editor popup to edit the button content.
If anyone can help me to resolve this issue it would be great. Thanks in advance.

Here is the code that you can try:
var test= new FroalaEditor('#editor', {
events: {
contentChanged: function () {
console.log ('content changed');
}
}
});
also, a running Jsfiddle sample: click here

How to stop event propagation in jQuery click function inside click function?

I'm having troubles stopping click event propagation. I have a click function inside another click function.
Here's what I'm trying to achieve:
Select a label by clicking it
Then click inside the box to determine which label was clicked
This works fine if you select labels one by one. But if you click on Label 1 and then Label 2, both events are recorded (see console log). Or if you click on Label 1 five times and then click inside the box, all five events are captured.
How can I stop this event propagation?
JSFiddle: https://jsfiddle.net/q930bvff
var objectName, currentObject;
$('.label').click(function(event) {
$('.label').removeClass('selected');
$(this).addClass('selected');
objectName = $(this).attr('id');
currentObject = $(this).hasClass('selected');
if (currentObject) {
$('#box').one('click', function(e) {
console.log(objectName);
});
}
event.stopPropagation();
});
html,
body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 1em;
}
.label {
padding: 12px;
border-radius: 4px;
background: #000;
color: #fff;
display: inline-block;
cursor: pointer;
}
.label.selected {
background: green;
}
#box {
height: 300px;
width: 300px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="label-1" class="label">Label 1</div>
<div id="label-2" class="label">Label 2</div>
<div id="box"></div>

Use $('#box').off("click") before every new .one("click" to kill all the previously created click handlers on #box.
See working snippet below:
var objectName, currentObject;
$('.label').click(function(event) {
$('.label').removeClass('selected');
$(this).addClass('selected');
objectName = $(this).attr('id');
currentObject = $(this).hasClass('selected');
if (currentObject) {
$('#box').off("click").one('click', function(e) {
console.log(objectName);
});
}
event.stopPropagation();
});
html,
body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 1em;
}
.label {
padding: 12px;
border-radius: 4px;
background: #000;
color: #fff;
display: inline-block;
cursor: pointer;
}
.label.selected {
background: green;
}
#box {
height: 300px;
width: 300px;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="label-1" class="label">Label 1</div>
<div id="label-2" class="label">Label 2</div>
<div id="box"></div>