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

event namespace not working in "mouseup" event

I'm trying to achieve event.namespace on a mouseup event but it doesn't seem to work, it always logs undefined
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
$(document).on("mouseup", function(event) {
console.log(event)
banner.hasClass("alt") ? banner.removeClass("alt") : banner.addClass("alt")
})
$(document).on("mouseup.namespace", function(event) {
console.log(event.namespace)
})
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://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>
Here's a fiddle of what I tried: http://jsfiddle.net/xpvt214o/221833/ Any idea?

You are doing it in a wrong way. Try this.
var banner = $("#banner-message")
var button = $("button")
$(document).on("namespace.someNamespace", function(event) {
console.log(event);
console.log(event.namespace);
banner.hasClass("alt") ? banner.removeClass("alt") : banner.addClass("alt")
});
$(document).on("mouseup", function(event) {
$(document).trigger('namespace.someNamespace');
});
You need a normal event (e.g. mouseup) to trigger the namespace event.

event.namespace is used by jQuery plugins to organize custom events
event.namespace | jQuery API Documentation
This will likely be used primarily by plugin authors who wish to handle tasks differently depending on the event namespace used.
Whatever you are trying to do, it seems like a namespace isn't the tool you're looking for.

you need to trigger mouseup.namespace
example here https://api.jquery.com/event.namespace/
also, change your namespace name from mouseup.namespace as it will trigger the event twice
// find elements
var banner = $("#banner-message")
var button = $("button")
// handle click and add class
$(document).on("mouseup", function(event) {
console.log(event);
banner.toggleClass("alt");
$(this).trigger("mouseup.namespace");
})
$(document).on("mouseup.namespace", function(event) {
console.log(event.namespace);
})
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://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>

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>

Change text and color of dynamically created button

I have a red button that is dynamically created and put into a li along with some user input. Looks like this
If the user clicks on the red button, the li element is prepended to another li like this
I want to be able to change the button from red to green and change the text from 'started' to 'unmark' when it moves to the second li and then back to red with the right text if that button is clicked again to move it back.
I'm not quite sure where to write the function to do this? Should I do this outside of my previous written functions or within each relevant ones? And if so, what would it look like because my button only has an id and no value, which is the method I've seen all over stackoverflow.
Thank you!
Edit: Code Snippet It looks like it's not showing the second column (configurations are all off)... does it work on other's people laptops?
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask'> <button id='started' value='on'>Started</button>" + text + '</li>');
}
})
);
// Clicking on the 'started' button will move the task from 'todo-list' to 'doing-list'
$("#todo-list").on('click', "button", function() {
var completedItem = $(this).parent();
$('#doing-list').prepend($(completedItem));
});
// Clicking on the 'unmark' button will moe the task back from 'doing-list' to 'todo-list'
$("#doing-list").on('click', "button", function() {
var completedItem = $(this).parent();
$('#todo-list').prepend($(completedItem));
});
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
/*Add a card button*/
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
/*User input*/
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
.column {
background-color: #E3E3E3;
min-height: 75px;
width: 25%;
display: inline-block;
position: relative;
margin: 5px;
vertical-align: top;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
color: #393939;
margin: 5px;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
margin-bottom: 15px;
}
/*Cards in the todo list*/
#started {
float: left;
background-color: #E65C5C;
border-radius: 6px;
border: none;
}
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js"> </script>
</body>

you can do something like this:
// Dynamically creates a new li element with 'started' button after user puts in text and clicks a button similar to 'submit'
$(document).ready(
$("#new-item").on('click', function() {
// once the document loads, create new item with this function
var text = $('#task').val();
if (text != '') {
$('#todo-list').prepend("<li class='addedTask unmark'> <button id='started' value='on'>Started</button>" + text + '</li>');
}
})
);
// Clicking on the 'started' button will move the task from 'todo-list' to 'doing-list'
$("#todo-list").on('click', "button", function() {
var completedItem = $(this).parent();
change(completedItem, true);
$('#doing-list').prepend($(completedItem));
});
// Clicking on the 'unmark' button will moe the task back from 'doing-list' to 'todo-list'
$("#doing-list").on('click', "button", function() {
var completedItem = $(this).parent();
change(completedItem, false);
$('#todo-list').prepend($(completedItem));
});
function change(selector, isMarked) {
if(isMarked) {
$(selector).removeClass('unmark');
$(selector).addClass('mark');
} else {
$(selector).removeClass('mark');
$(selector).addClass('unmark');
}
}
header {
background-color: #026aa7;
height: 30px;
text-align: center;
padding: 5px 8px;
}
header a {
height: 30px;
width: 80px;
text-align: center;
background-image: url(https://a.trellocdn.com/dist/images/header-logo-2x.01ef898811a879595cea.png);
background-repeat: no-repeat;
text-align: center;
display: inline-block;
background-size: 80px 30px;
}
body {
background-color: #0078c0;
margin: 0px;
font-family: sans-serif;
}
/*Add a card button*/
#new-item {
position: relative;
left: 40px;
top: 20px;
font-family: sans-serif;
padding: 4px;
width: 100px;
background-color: #ffffff;
border-radius: 4px;
}
/*User input*/
#task {
position: relative;
left: 25px;
top: 20px;
height: 20px;
width: 200px;
padding: 10px;
border-radius: 4px;
padding-left: 4px;
}
.column {
background-color: #E3E3E3;
min-height: 75px;
width: 25%;
display: inline-block;
position: relative;
margin: 5px;
vertical-align: top;
top: 75px;
right: 287px;
border-radius: 5px;
}
.column h1 {
font-size: 20px;
padding-left: 10px;
position: relative;
color: #393939;
margin: 5px;
}
li {
list-style-type: none;
margin-left: 8px;
text-indent: 10px;
}
li.addedTask {
border: 1px solid white;
border-radius: 4px;
padding: 15px;
width: 83%;
background-color: white;
margin-bottom: 15px;
}
/*Cards in the todo list*/
#started {
float: left;
border-radius: 6px;
border: none;
}
.mark button {
background-color: green;
}
.unmark button {
background-color: #E65C5C;
}
<head>
<title> HW03 Javascript and jQuery </title>
<link rel="stylesheet" href="_css/style.css">
</head>
<body>
<header>
</header>
<section>
<!-- create input tag for user input -->
<input type="text" id="task">
<!-- button takes input and adds a new element with content to 'list_do' -->
<button id="new-item"> Add a card </button>
<!-- ability to move items between list_todo and list_doing -->
<div class="column" id="to-do">
<h1> To Do </h1>
<li id="todo-list"></li>
</div>
<div class="column" id="doing">
<h1> Doing </h1>
<li id="doing-list"></li>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="_js/main.js"> </script>
</body>