localStorage not set - javascript

Could anybody perhaps suggest why the following code would not store the stylsheet choice.
SETTINGS.PHP
<?php
session_start();
?>
<!doctype html>
<html>
<head>
<script type="text/javascript">
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")
&& !a.disabled) return a.getAttribute("title");
}
return null;
}
localStorage.setItem('activeStylesheet', getActiveStyleSheet())
</script>
<meta charset="utf-8">
<title>Intapp.Com</title>
<link rel="stylesheet" type="text/css" href="dwcss.css">
<link rel="alternate stylesheet" type="text/css" title="girly" href="style1.css">
<link rel="alternate stylesheet" type="text/css" title="default" href="dwcss.css">
<link rel="alternate stylesheet" type="text/css" title="neutral" href="style2.css">
<meta name="viewport" content="width=320.1, initial-scale=1.0, user-scalable=0 minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<div class="header">
<h1> User Settings </h1>
</div>
<div id="box2">
To change to this style click here
<button onclick="changeStyle('girly')">Girly</button>
<button onclick="changeStyle('default')">Default</button>
<button onclick="changeStyle('neutral')">Neutral</button>
</div>
<div class="footer">
</div>
</body>
</html>
this is where i am trying to retrieve the local storage value when i test in the browser the default stylsheet is activated on index.php, i can't see what i'm doing wrong if anyone could help it would be greatly appreciated.
INDEX.PHP
<html>
<head>
<script>
window.onload=setstyle()
{
localStorage.getItem('activeStylesheet')
}
</script>
<meta charset="utf-8">
<link rel="apple-touch-startup-image" href="appsplash.png">
<title>Intapp.Com</title>
<link rel="stylesheet" type="text/css" href="dwcss.css">
<link rel="alternate stylesheet" type="text/css" title="default" href="dwcss.css">
<link rel="alternate stylesheet" type="text/css" title="neutral" href="style2.css">
<meta name="viewport" content="width=320.1, initial-scale=1.0, user-scalable=0 minimum-scale=1.0, maximum-scale=1.0">
<link rel="apple-touch-icon" href="applogo.png"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>

In getActiveStylesheet, your for loop is setting a to document.getElementsByTagName("link") each iteration, while you should be iterating through it:
function getActiveStyleSheet() {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title') && !lnks[i].disabled) {
return lnks[i].getAttribute("title");
}
}
return null;
}
Also, instead of setting activeStylesheet when the page loads, you should set it every time the style is changed, i.e. at the end of changeStyle:
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}
}
localStorage.setItem('activeStylesheet', getActiveStyleSheet())
}
On index.php, there should be code to actually set the style, such as:
window.onload = function () {
var
lnks = document.getElementsByTagName('link'),
activeStylesheet = localStorage.getItem('activeStylesheet');
for (var i = lnks.length - 1; i >= 0; i--)
if (lnks[i].getAttribute('rel').indexOf('style') > -1 && lnks[i].getAttribute('title'))
lnks[i].disabled = lnks[i].getAttribute('title') != activeStylesheet;
};
Of course, you should try to factor out the duplicate code shared between these three code blocks at some point.
PS: In general, if you indent your code, it'll be far easier to read.

I'm assuming you transitively copied this code from http://alistapart.com/article/alternate. If so, you may be able to just use http://d.alistapart.com/alternate/styleswitcher.js, with the following changes:
Replace calls to readCookie(name) with calls to localStorage.getItem(name)
Replace calls to createCookie(name, value, days) with calls to localStorage.setItem(name, value)

Related

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at script.js:13

I am stuck with the 'cannot read properties of null' type error.. I see that the page is running correctly but in the console it throws this subject line error.
// const panel = document.querySelector("#panel");
const sendButton = document.querySelector('#send');
const ratingsContainer = document.querySelector('.ratings-container');
const ratings = document.querySelectorAll('.rating');
const experience = document.querySelectorAll('small');
const removeActive = () => {
for (let i = 0; i < ratings.length; i++) {
ratings[i].classList.remove('active');
}
};
ratingsContainer.addEventListener('click', (e) => {
if (e.target.parentNode.classList.contains('rating')) {
removeActive();
e.target.parentNode.classList.add('active');
}
});
sendButton.addEventListener('click', () => {
console.log(experience[0]);
for (let i = 0; i < experience.length; i++) {
if (experience[i].innerHTML === 'Unhappy' || experience[i].innerHTML === 'Neutral') {
document.location.href = 'negative_review.html';
} else {
document.location.href = 'positive_review.html';
}
}
});
<!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" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Feedback</title>
</head>
<body>
<div id="panel" class="panel-container">
<form>
<strong>Great! Would you like to post your review?</strong>
<br />
<br />
Google
<br />
</form>
</div>
<script src="script.js"></script>
</body>
</html>
this line is trying to find something with the class ratings-container:
const ratingsContainer = document.querySelector('.ratings-container');
but there's nothing in the html with that class, so the ratingsContainer is effeectively null, which has no addEventListener method.
the problem with the code is that sendButton element and ratingsContainer element are null. there are no elemnts in the html fitting the selector you wrote.
hope I was helpful.
// const panel = document.querySelector("#panel");
const sendButton = document.querySelector('#send');
const ratingsContainer = document.querySelector('.ratings-container');
const ratings = document.querySelectorAll('.rating');
const experience = document.querySelectorAll('small');
const removeActive = () => {
for (let i = 0; i < ratings.length; i++) {
ratings[i].classList.remove('active');
}
};
ratingsContainer.addEventListener('click', (e) => {
if (e.target.parentNode.classList.contains('rating')) {
removeActive();
e.target.parentNode.classList.add('active');
}
});
sendButton.addEventListener('click', () => {
console.log(experience[0]);
for (let i = 0; i < experience.length; i++) {
if (experience[i].innerHTML === 'Unhappy' || experience[i].innerHTML === 'Neutral') {
document.location.href = 'negative_review.html';
} else {
document.location.href = 'positive_review.html';
}
}
});
<!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" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Feedback</title>
</head>
<body>
<div id="panel" class="panel-container">
<form>
<strong>Great! Would you like to post your review?</strong>
<br />
<br />
Google
<br />
</form>
</div>
<button type="button" id="send"></button>
<div class="ratings-container"></div>
<script src="script.js"></script>
</body>
</html>

javascript for loop issue

Issue I am having is as follows: This for loop should be putting a number in the address and counting up to 152 and then putting it full address as follows
<img src="http://pokeapi.co/media/img/1.png">
<img src="http://pokeapi.co/media/img/2.png">
and so on. What am I missing?
var webaddress = ['<img src="http://pokeapi.co/media/img/">'];
var text = "";
var i;
for (i = 0; i < 152; i++) {
text += webaddress[i] + ".png";
}
document.getElementById("Pokeman").innerHTML = text;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</style>
<script type="text/javascript" rel="script" type="script" href="script.jss"></script>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
</head>
<body>
<div id="container">
<p id="Pokeman"></p>
</div>
</body>
</html>
You can create the webaddress as root string and replace it inside loop
var webaddress = '<img src="http://pokeapi.co/media/img/[index].png">';
var text = "";
for (var i = 1; i <= 152; i++) {
text += webaddress.replace("[index]", i);
}
document.write(text);
You are setting your javascript in the head - but the element that is referenced (#Pokeman) is not in the DOM yet - simply move the js block to the end - before the closing body tag. and since you are using jquery - i simplified the js and used it too.
EDIT - I just inserted your img code into the function so that it will render the images as the number increments.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<p id="Pokeman"></p>
</div>
<script type="text/javascript" rel="script" type="script" href="script.jss"></script>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script>
$(document).ready(function(){
for (var i = 1; i <= 152; i++) {
$("#Pokeman").append('<img src="http://pokeapi.co/media/img/'+ i + '.png"/>');
}
})
</script>
</body>
</html>

Vertical tabs does not display properly on github

I coded a vertical tab in test.html and it works when I open it up with my browser from my hard drive. It looks like this:
Correct display
but when I open the webpage using github, it no longer display properly. It becomes this:
Wrong display
Please, what could be the problem? This is my code:
<script>
function openFood(evt, foodName)
{
var i, x, tablinks;
x = document.getElementsByClassName("food");
for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++)
{
tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(foodName).style.display = "block";
evt.currentTarget.className += " w3-red";
}
</script>
<!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">
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<link href='http://www.w3schools.com/lib/w3.css' rel='stylesheet' type='text/css'>
</head>
<nav class="w3-sidenav w3-light-grey w3-card-2" id="size">
<div class="w3-container">
<h5><b>Category</b></h5>
</div>
Rice
Noodles
Chicken
Beef
</nav>
I figured out the problem. My browser blocked parts of the page due to weak encryption.
view

jQuery mobile does not add back button?

My head:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<script src="<?php echo base_url();?>/assets/js/vendor/modernizr-2.6.2.min.js"></script>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 target-densitydpi=medium-dpi'/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<!--jQuery, mobile options, JQM-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php echo base_url();?>assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="<?php echo base_url();?>assets/js/transition.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<link rel="stylesheet" href="<?php echo base_url();?>/assets/css/normalize.css">
<link rel="stylesheet" href="<?php echo base_url();?>/assets/css/main.css">
</head>
transition.js:
$(document).bind("mobileinit", function() {
//back button
$.mobile.page.prototype.addBackBtn = true;
if (navigator.userAgent.indexOf("Android") != -1) { $.mobile.defaultPageTransition = 'none'; $.mobile.defaultDialogTransition = 'none'; } else {
$.mobile.defaultPageTransition = 'pop';
}
});
Why isn't it being added?
Make sure that this snippet is AFTER jQuery library loads but BEFORE jQueryMobile library is loaded:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
//back button
$.mobile.page.prototype.options.addBackBtn = true;
if (navigator.userAgent.indexOf("Android") != -1) { $.mobile.defaultPageTransition = 'none'; $.mobile.defaultDialogTransition = 'none'; } else {
$.mobile.defaultPageTransition = 'pop';
}
});
</script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
Refer to: jquery-mobile still "No Back Button" (Beta 2)

Loading a <ul> with a String array taken from an xml

I am trying to make a dynamic list in HTML, I'm using a string array as data for the list, this array is OK, it has some string inside, I verified it.So this is my code:
function add_li(list, text) {
var list = document.getElementById(list);
var li = document.createElement("li");
li.innerHTML = text;
list.appendChild(li);
}
function load_list(list, list_array) {
for (var i = 0; i < list_array.length; i++) {
add_li (list, list_array[i]);
}
}
Here's the call:
load_list(lista_bodegas, Bodegas);
Html where the is:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../css/main.css">
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/cordova-2.3.0.js"></script>
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, minimum-scale=1, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>
</title>
</head>
<body onload= "cargarBodegas();">
<ul id= "lista_bodegas">
</ul>
</body>
</html>
Try using
load_list("lista_bodegas", Bodegas);
instead of
load_list(lista_bodegas, Bodegas);

Categories