Save Button Colour on local storage - javascript

Im quite new to web development. i have seen similar questions, but it did not help me.
I have a button and it turns green when i press it. But when the page refreshes, the colour disappears. I know local storage is a solution to this but i don't know how to implement it. i tried so many times with local storage but couldn't figure out a solution . i have posted my HTML code below. Note that my button is inside a form , because i need to access a link from my button. How can i save the button colour with local storage so that the colour doesn't disappear when the page refreshes. And if i put a second button i want the colour to disappear from the first button, so that only the second button is active. Any help is truly appreciated. Any examples done on my code would also help !!Thanks a lot for your time.
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.button {
box-shadow: -2px 2px blanchedalmond, -1px 1px orange, -1px 1px orange;
margin-top: 280px;
margin-left: 420px;
background-color:rgb(128, 128, 128);
border: none;
color: white;
padding: 30px 35px;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
.button:focus{
background-color:rgba(10, 170, 10, 0.952);
}
</style>
</head>
<body>
<div style = "position:fixed; left:-300px; top:-100px;">
<form method="get" action="http://1.1.1.1/myfile.php" >
<button class="button">Lights On</button>
</form>
</div>
</body>
</html>

You can use localStorage.setItem(key, value) and localStorage.getItem(key). Here's an example that adds an event handler to the form to save in localStorage that the button was pressed, and on page load, mark the color green if it finds that localStorage indicator:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.button {
box-shadow: -2px 2px blanchedalmond, -1px 1px orange, -1px 1px orange;
margin-top: 280px;
margin-left: 420px;
background-color:rgb(128, 128, 128);
border: none;
color: white;
padding: 30px 35px;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
.button-green, .button:focus {
background-color:rgba(10, 170, 10, 0.952);
}
</style>
</head>
<body>
<div style = "position:fixed; left:-300px; top:-100px;">
<form id="form" method="get" action="https://1.1.1.1/myfile.php" >
<button class="button">Lights On</button>
</form>
<script>
if (localStorage.getItem('formSubmitted') === 'yes') {
for(const button of document.getElementsByClassName('button')) {
button.classList.add('button-green')
}
}
document.getElementById('form').addEventListener('submit', (event) => {
localStorage.setItem('formSubmitted', 'yes');
})
</script>
</div>
</body>
</html>

Related

How to add clickevent to retrieve input text and run function accordingly?

I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
/*Html & body theme*/
*{
margin:0;
padding:0;
box-sizing: border-box;
}
html{
font-family:"lato",Arial,sans-serif;
}
body {
width: 100%;
height: 100vh;
color:black;
background: linear-gradient(-45deg, rgba(8,19,114,1) 6%, rgba(0,212,255,1) 42%, rgba(231,246,246,1) 82%);
}
/*container properties*/
.grid-container {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
}
.grid-container:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#box {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
border-radius:5px;
}
#box{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
border-radius: 5px;
}
.grid-item-1{
height: 150px;
width:1880px;
position:fixed;
left:10px;
top:20px;
font-size:100px;
text-align:center;
}
.grid-item-2{
height: 600px;
width:500px;
position:fixed;
left:10px;
top:350px;
}
.grid-item-3{
height: 300px;
width:1370px;
position:fixed;
left:520px;
top:180px;
}
.grid-item-4{
height:450px;
width:1370px;
position:fixed;
left:520px;
top:500px;
}
.grid-item-5{
height: 150px;
width:500px;
position:fixed;
left:10px;
top:180px;
font-size: 30px;
}
/*Search Bar Properties*/
form.searchInput input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.searchInput button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.searchInput button:hover {
background: #0b7dda;
}
form.searchInput::after {
content: "";
clear: both;
display: table;
}
form.searchInput {
top:30px;
bottom:40px;
position:relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="Stylesheet" href="WeatherDashboardStylesheet.css" type=text/CSS>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<title>WeatherDashboard</title>
</head>
<body>
<div class ="grid-container">
<div id="box" class="grid-item-1">
WeatherDashboard â›…
</div>
<div id="box" class="grid-item-2">
Item 2
</div>
<div id="box" class="grid-item-3">
Item 3
</div>
<div id="box" class="grid-item-4">
<div id="display" class="display-box">
<p class="city"></p>
<img class="icon">
<p class="date"></p>
<p class="weather"></p>
<p class="temp"></p>
<p class="humidity"></p>
<p class="wind"></p>
</div>
</div>
<div id="box" class="grid-item-5">
Search for a City:
<form class="searchInput" style="margin:auto;max-width:300px">
<input id=input class="input1" type="text" placeholder="Search..." name="search" value="">
<button onclick="myfunction()" id="button" class="button1" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<script rel="Script" src="WeatherDashboardScript.js" type=text/javascript></script>
<script src="https://api.openweathermap.org/data/2.5/forecast?q=chicago&appid=dc171ae0b3b507207c6605cbab0a5f98"></script>
</body>
</html>
Hello, I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
You've got a few problems with your html and your js.
First with your js. In your file, all the code is in 'the main' and is being executed as soon as the file loads. You dont want that, you want to create a function so you can use it to link it with the 'onclick' event. You that simply by wrapping your code in a function like this:
function myfunction() {
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
}
After that, I see you've got a variable called City inside your request which has no value. Your code has to know what is that and be able to retrieve its value. For that we call the 'document' object which contains the input and take its value. Like this:
var City = document.getElementById('input').value;
console.log(City) // Print it for good meassure
With that inside your function, every time you click the button, the value is going to be updated and do the request.
Now, in your html you need to change your button's type property. If its of type submit, the form is submited and the page reloaded (The whole form is unnecesary really but I'll leave it in as to not change your code too much). In this case you want your button to be of type 'button' so it only acts as a button when pressed. Like this:
...
<form class="searchInput" style="margin:auto;max-width:300px" >
<input id="input" class="input1" type="text" placeholder="Search..." name="search">
<button onclick="myfunction()" id="button" class="button1" type="button"><i class="fa fa-search"></i></button>
</form>
...
With all that your code should work, retrieve your json and display the information you want on screen.
I hope all of this helps!

iFrame won't become visible when button is clicked

I have an iFrame in HTML code, and I created a script tag that I set on a submit button. I want the iFrame to be visible when I click on the submit button, but that is not working. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
#outerdiv
{
border:none;
width:100%;
height:500px;
overflow:hidden;
}
#innerIframe
{
border: none;
position:relative;
top:-190px;
width:100%;
height:900px;
}
</style>
</head>
<body>
<h2>Web Service</h2>
<script type="text/javascript">
function showIFrame() {
var iframe = document.getElementById("innerIframe");
iframe.style.visibility="visible";
}
</script>
<form class="example" method="post" style="margin:auto;max-width:500px">
<input type="text" placeholder="Search query" name="search2">
<button type="submit" name="submit" onclick="showIFrame()"><i class="fa fa-search"></i></button>
</form>
<br>
<div id="outerdiv" >
<iframe src={{results}} id="innerIframe" style="visibility: hidden;" scrolling="yes"></iframe>
</div>
</body>
</html>
{{results}} is the URL that is passed by the user in python Flask. So in the form the user types in a word, which then joins it to a URL and performs a search. The search works perfectly, but when the page is loaded on startup, it shows Not Found, the requested URL has not been found... and I understand why that happens as the URL hasn't been loaded yet. So I want to make the iFrame invisible, and once the submit button is pressed, the frame can be visible.
I have tried with jQuery as well, but it did not work.
All help and advice will be highly appreciated.
First pass "event" when you call the onClick function in your HTML code like this *onclick="showIFrame(event)
Then in your function, you accept the "event" as a parameter like this *function showIFrame(event) {
A click button most times trigers your page to refresh, so you have to stop that by preventing the default action. Add "event.preventDefault()" to your function like this *event.preventDefault()

JavaScript classList not working while clicking a button

I am currently creating a dropdown menu so I want the menu to be displayed when clicked by adding class via Javascript but classList is not working at all. I tried lots of time but couldn't. Also if i add style.display = "block", then it works! I am unable to figure out! Please Help me!
document.getElementById('dbtn').addEventListener('click', function() {
document.getElementById('d-content').classList.toggle('show');
});
#wrapper {
position: relative;
display: inline-block;
}
#dbtn {
background-color: #F44336;
font-size: 27px;
font-family: 'Droid Sans', sans-serif;
border: none;
padding: 0.3em 0.6em;
color: #FFFFFF;
cursor: pointer;
outline: none;
}
#d-content {
position: absolute;
display: none;
background-color: #F44336;
font-family: 'Droid Sans', sans-serif;
font-size: 22px;
border-top: 2px solid #FFFFFF;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
#d-content a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 0.3em 5em 0.3em 0.3em;
}
#d-content a:hover {
background-color: darkorchid;
}
.show {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown Menu</title>
</head>
<body>
<div id="wrapper">
<input type="button" id="dbtn" value="Select..." />
<div id="d-content" class="drop">
<a>USA</a>
<a>Canada</a>
<a>Europe</a>
</div>
</div>
</body>
</html>
Browser calculates css properties based on selectors order and selectors weight. In your case #id selector overrides your class selector.
.show {
display: block !important;
}
Or it's better not to use important at all:
#d-content.show{
display: block ;
}
You can read more about selectors weight here. Also you can alaways check those kind of things in dev console.
In CSS, the id selector has far more weight over the class selector.
You need to add !important; to your .show display rule.
The problem is you are using the wrong approach (Don't worry it happens, and it's okay). it would be easier if you just toggle the display property it will save lot of your time. you can toggle the display property using following snippest:
document.getElementById('dbtn').addEventListener('click', function () {
var dContent = document.getElementById('d-content');
dContent.style.display = dContent.style.display === 'none' ? 'block' : 'none';
});

CSS on button input cancel the prop disabled property in jQuery

I made some CSS style for input button. After doing it, the prop('disabled',true) is not working for me (it used to work before the CSS changes)
HTML code:
<div id="navigation">
<button id="nextButton" type="button" name="nextButton">Next</button>
</div>
jQuery code:
$('#nextButton').prop('disabled',true);
CSS code:
button{
background: #cfe2f3;
background: -webkit-linear-gradient(#cfe2f3, #d0e0e3);
background: linear-gradient(#cfe2f3, #d0e0e3);
border: 0.5px solid #000;
border-radius: 5px;
color: #000;
display: inline-block;
padding: 8px 20px;
font: normal 700 18px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: none;
}
My propose it to disable the press on the Next button
Try to add some CSS to the disabled state:
button:disabled {
// your css rules
}
Add style to button as well when you make it disable so it will be confirm that button is disabled
$('#nextButton').css('border','1px solid red');
$('#nextButton').prop('disabled',true);
Hope so it will help you.
it is working.try this.I have linked jquery online
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#one{
background: #cfe2f3;
background: -webkit-linear-gradient(#cfe2f3, #d0e0e3);
background: linear-gradient(#cfe2f3, #d0e0e3);
border: 0.5px solid #000;
border-radius: 5px;
color: #000;
display: inline-block;
padding: 8px 20px;
font: normal 700 18px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: none;
}
</style>
<body>
<input type="button" id="one" name="button" value="button">
<script type="text/javascript">
$(document).ready(function(){
$("#one").prop('disabled',true).css({"opacity":"0.6"});
$("#one").on('click',function(){
alert(" I am enable");
})
});
</script>
</body>
</html>
try it with changing 'disabled' to 'enable', if it is enable, you may see an alert.
You can disable a button by using below mentioned steps.
Say your button class name = setAlg
Step 1:
Using Jquery attr Attribute :
$('.setAlg').attr('disabled', 'disabled');
Step 2:
Using Jquery addClass CSS Class :
$('.setAlg').addClass('disabled');
Step 3 :
Then by Declaring CSS Style Class :
<style type="text/css">
.disabled
{
background: none repeat scroll 0 0 burlyWood;
cursor: default !important;
}
</style>

How Can I Change The Style Of A Div On Mousedown?, or any other event for that matter…

But it doesn't work. You can see I'm trying to change the class of the div containing season.png onmousedown and revert it onmouseup.
What am I missing?
Thanks.
Mike
It's working just fine. There is nothing wrong with the code that you posted, so if you can't see it there has to be something wrong with your css.
I used this to test the code:
<html>
<head>
<title>Test</title>
<style>
.winter { border: 1px solid blue; }
.spring { background: yellow; }
.summer { background: green; }
</style>
</head>
<body>
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
<img src="Resources/season.png" />
</div>
</body>
</html>
It works for me so I guess you need to run some checks on your code. Make sure your css is included.
Post the complete code you are using so we can look for errors.
This is the code I used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onmouseevents on div</title>
<style type="text/css">
body
{
background-color: #FFF;
color: #000;
}
.page
{
margin: 10px auto;
width: 640px;
}
.winter
{
background-color: cyan;
}
.spring
{
color: magenta;
}
.summer
{
color: yellow;
}
</style>
</head>
<body>
<div class="page">
<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
Cats!
</div>
</div>
</body>
</html>
As an alternative - I have used the hover pseudoselector for this.
Here's a personal example:
.sidebar ul.sidebuttons li a
{
font: bold italic x-large/1.1 trebuchet ms,verdana,sans-serif;
display: block; /* effect should be in a new box not inline */
text-decoration: none; /* turn off link underlining */
color: yellow;
background: black url(sidebar_off.png) no-repeat center;
padding: 10px 10px 10px 5px;
margin: 0px 0px 20px 0px;
border: white outset;
border-width: 2px 2px 2px 0px;
text-align: right;
text-transform: lowercase;
}
.sidebar ul.sidebuttons li a:hover
{
background: yellow url(sidebar_on.png) no-repeat center;
color: black;
border: black inset;
text-decoration: none;
border-width: 2px 2px 2px 0px;
}
The HTML looks like:
<div class="sidebar">
<ul class="sidebuttons">
<li>Go Somewhere</li>
If you're having trouble, try Firefox Web Developer add-on or something similar to check the style information on that part of the page. It might not be triggering what you think it should be triggering.
<style>
.summer{ background-color:red;}
.spring{ background-color:blue;}
.aa{ font-size:18px;}
.bb{ font-size:36px;}
</style>
<div class="aa spring" onmousedown="this.className='summer aa'" onmouseup="this.className='spring bb'">
aaaaaaaaa
</div>
I test this code, it works well.
I think, not javascript problem. Try to check css, or other things.
Maybe put js code and css code on the img is what you need.
It's very easy with jQuery:
$(".winter").mouseup(function() {
$(this).addClass("spring");
$(this).removeClass("summer");
},function(){
$(this).addClass("summer");
$(this).removeClass("spring");
});
The Javascript file I was using was a very inflexible library. I solved the problem a different way.

Categories