My localStorage.clear(); won't work - javascript

I am trying to make a simple program with localStorage. I created a button to reset all the data in the localStorage. Unfortunately, it won't work I don't know why.
Here's my code:
<script>
var slot = localStorage.getItem("slot");
if (slot == null) {
slot = 10;
}
document.getElementById("slot").innerText = slot;
function reduceSlot() {
if (slot >= 1) {
slot--;
document.getElementById("slot").innerText = slot;
localStorage.setItem("slot", slot);
}
else {
document.getElementById('slot').innerText = "FULL";
document.getElementById("button1").style.display = "none";
}
}
document.getElementById("button1").onclick = reduceSlot;
function clearLocalStorage(){
localStorage.clear();
}
</script>
<body>
<p id="slot">10</p>
Deduct
<button onclick="clearLocalStorage()">Clear All</button>
</body>
I followed this code in a website but it doesn't run. Most of the websites that I browsed were confusing. I need help.

<button onclick="window.localStorage.clear();">Clear All</button>
This should work.

Related

How to have a variable not reset when refreshing my website

<script>
var sum = 0;
var pressYet = false;
function changeIt() {
if(pressYet == false){
sum++;
document.getElementById('test').innerHTML = sum;
pressYet = true;
} else {
document.getElementById('test').innerHTML = "You have already pressed the button";
document.getElementById("button").style.visibility = "hidden";
}
}
</script>
<div id="test">
<b> <var> Test </ var> </b>
</div>
<button onclick="changeIt()" id = "button" >Press If you are here</button>
SO I have this sweet epic button on my website, its very cool, but I want to make it better. I was wondering how to make the variable 'sum' not reset every time I refresh my website. I know there's a term for that but for the life of me I cannot figure it out. I want it so every time someone presses the button, 'sum' gets added one to it and that number would be permanent. So over time that number gets very large.
I am very new to HTML so please be kind to me.
You can save the value to localStorage and then retrieve it from localStorage after page load. Then on the basis of the data you can adjust the page. I have slightly modified your code here
var sum = 0;
var pressYet = localStorage.getItem('pressYet');
function changeIt() {
if (pressYet == null) {
sum++;
document.getElementById('test').innerHTML = sum;
pressYet = true;
localStorage.setItem('pressYet', pressYet);
} else {
document.getElementById('test').innerHTML = "You have already pressed the button";
document.getElementById("button").style.visibility = "hidden";
}
}
(function init() {
if (localStorage.getItem('pressYet') != null || localStorage.getItem('pressYet') != "") {
document.getElementById('test').innerHTML = "You have already pressed the button";
document.getElementById("button").style.visibility = "hidden";
}
})();
<div id="test">
<b> <var> Test </ var> </b>
</div>
<button onclick="changeIt()" id="button">Press If you are here</button>
You can check out the demo https://jsfiddle.net/5jyrk6s8/

Cannot get if-statement to work within function

I'm a complete JS noob who set off on a mission to create a quiz as a first/second-ish project. I suppose there are better ways to do this than the way I'm doing it, but currently I, after a correct submission of the user, want to remove the current iteration from the array which is converted into text through innerHTML, and do the same for the correct answer/explanation. This works well, up until the last bit. After the user completes the last question, it again removes the data from the array, showing "UNDEFINED" in the screen. I figured that, by adding an if statement to see if array.length > 1, I could circumvent this. I tried avoiding this by having a different if statement return true or false and then using && on the function; to no avail. Any and all if statements here give me the errors:
Uncaught ReferenceError: nextQuestion is not defined
at submitAnswer (VM588 script.js:61)
at HTMLButtonElement.onclick (quizpage.html:19)
I've attached the html and JS underneath.
var questionsOverview = ["1 - 1+1 = ?", "2 - What food do dieters tend to avoid?", "3 - Best fast food chain?"];
var answersOverview = ["[A] 1 [B] 3 [C] 2", "[A] Protein [B] Carbs [C] Glucose", "[A] Burger King [B] KFC [C] McDonalds"];
var answersLetter = ["C", "B", "C"];
var score = 0;
var answerUser = "test"
var currentQuestion = questionsOverview[0];
//set buttons as answersLetter
function setRed() {
document.getElementById(answerUser).style.background = "red";
}
function pressedA() {
answerUser = "A";
setRed();
document.getElementById("B").style.background = "";
document.getElementById("C").style.background = "";
};
function pressedB() {
answerUser = "B";
setRed();
document.getElementById("A").style.background = "";
document.getElementById("C").style.background = "";
};
function pressedC() {
answerUser = "C";
setRed();
document.getElementById("A").style.background = "";
document.getElementById("B").style.background = "";
};
//preps the first question/answer
function changeQuestion() {
document.getElementById("question").innerHTML = questionsOverview[0];
document.getElementById("answer").innerHTML = answersOverview[0];
};
//move to the next question
checkForEnd() && function nextQuestion() {
questionsOverview.shift();
answersOverview.shift();
answersLetter.shift();
changeQuestion();
};
// submit user answer
function submitAnswer() {
var audio = document.getElementById("tleeni");
audio.play();
if(answerUser === answersLetter[0]) {
alert("Correct! You're smart!");
nextQuestion();
}
else {
alert("Too bad!");
}
};
function checkForEnd() {
if (answersOverview.length > 1) {
return true;
} else {
return false;
}
};
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="reset.css">
<script src="script.js" type="text/javascript"></script>
</head>
<body onload="changeQuestion()">
<div class="top-header" id="header">
<font color="white">Quiz</font></div>
<div class="main-content" id="main-content">
<h2 id="question">1</h2>
<h3 id="answer">2</h3>
<h4 id="score>">scorefiller</h4>
<div id="buttons">
<button onClick="pressedA()" class="answers" id="A">A</button>
<button onClick="pressedB()" class="answers" id="B">B</button>
<button onClick="pressedC()" class="answers" id="C">C</button>
</div>
<button onClick="submitAnswer()" id="submit">Submit answer!</button>
</div>
<audio id="tleeni" src="submit.mp3"></audio>
</body>
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans|Pacifico');
</style>
Given that I'm really new to programming I'd appreciate any and all feedback. Thank you very much in advance!
I think your issue might be here
//move to the next question
checkForEnd() && function nextQuestion() {
questionsOverview.shift();
answersOverview.shift();
answersLetter.shift();
changeQuestion();
};
You're not actually calling the function nextQuestion; you're only making a boolean check that is equivalent to checkForEnd() && true since a function is a truthy value.
The function declaration is also "lost" hence why you're getting that reference error.
true && function burrito() {
return '🌯';
}
burrito();
// VM1158:1 Uncaught ReferenceError: burrito is not defined
checkForEnd() && function nextQuestion() {}
This doesn't run each time you click the button, nor does it run each time nextQuestion() is called. It does it once, whenever the code is first loaded. Even if it did all it would be doing is creating a named function expression, which is not useable outside the function itself, ie you can't call nextQuestion().
What you want is to use checkForEnd() inside the function and return based on that
function nextQuestion() {
if(!checkForEnd()) return;
questionsOverview.shift();
answersOverview.shift();
answersLetter.shift();
changeQuestion();
};

How do I clear the innerHTML of a h1 tag

I'm just trying to make a simple mobile-based calculator. So far I've managed to display the digits pressed up to a certain character limit. I'm trying to make it so it clears the digits within the h1 tag that serves as the display.
I've tried using .innerHTML = "", but that isn't working. How should I fix this?
HTML
<body>
<h1 id="display">Calculator</h1>
<div class="buttons container" id="arithmetic">
<button onclick="clear()" onkeypress="clear()">AC</button>
<button><sup>+</sup>⁄<sub>−</sub></button>
<button>%</button>
<button>÷</button>
<button onclick="number(7)" onkeypress="number(7)">7</button>
<button onclick="number(8)" onkeypress="number(8)">8</button>
<button onclick="number(9)" onkeypress="number(9)">9</button>
<button>×</button>
<button onclick="number(4)" onkeypress="number(4)">4</button>
<button onclick="number(5)" onkeypress="number(5)">5</button>
<button onclick="number(6)" onkeypress="number(6)">6</button>
<button>−</button>
<button onclick="number(1)" onkeypress="number(1)">1</button>
<button onclick="number(2)" onkeypress="number(2)">2</button>
<button onclick="number(3)" onkeypress="number(3)">3</button>
<button>+</button>
<button>.</button>
<button id="doubleSpace" onclick="number(0)" onkeypress="number(0)">0</button>
<button>=</button>
</div>
<div class="calcOptions container">
<button>Arithmetic</button>
<button>Algebra</button>
<button>Calculus</button>
<button>Statistics</button>
</div>
</body>
JavaScript
var currentQuery;
var pastQuery;
var queryLength = document.getElementById("display").innerHTML.length;
function number(n) {
if (document.getElementById("display").innerHTML == "Calculator") {
document.getElementById("display").innerHTML = "";
}
if (queryLength >= 15) {
} else {
currentQuery = document.getElementById("display").innerHTML;
currentQuery += n;
document.getElementById("display").innerHTML = currentQuery;
}
}
function clear() {
currentQuery = "";
document.getElementById("display").innerHTML = currentQuery;
}
You can't name a javascript function with clear(), and the value of queryLength should set after the document ready replace your code by:
var currentQuery;
var pastQuery;
var queryLength;
document.addEventListener("DOMContentLoaded", function(event) {
var queryLength = document.getElementById("display").innerHTML.length;
})
function number(n) {
if (document.getElementById("display").innerHTML == "Calculator") {
document.getElementById("display").innerHTML = "";
}
if (queryLength >= 15) {
} else {
currentQuery = document.getElementById("display").innerHTML;
currentQuery += n;
document.getElementById("display").innerHTML = currentQuery;
}
}
function clearValue() {
currentQuery = "";
document.getElementById("display").innerHTML = currentQuery;
}
and the clear button with:
<button onclick="clearValue()" onkeypress="clearValue()">AC</button>
The problem is that the name of your function clear is already used by this native function document.clear(). Here is a deeper look on why this native function is called and not your function: Is “clear” a reserved word in Javascript?.
The solution is to simply rename your clear() function to something else e.g. allcancel()
You can try using .innerText = "".

Copy values between elements

I'm trying to copy some values between elements but doesn't work.
What's wrong?!
This two rows works well
document.getElementById('ftreturnslbl').style.display = 'block';
document.getElementById('ftasc1primoritorno').style.display = 'block';
function ff_returnasc1primo_action(element, action)
{
switch (action) {
case 'click':
document.getElementById('ftreturnslbl').style.display = 'block';
document.getElementById('ftasc1primoritorno').style.display = 'block';
document.getElementById('toftasc1primoreturn').value =
document.getElementById('fromftasc1primo').value;
document.getElementById('fromftasc1primoreturn').value = document.getElementById('toftasc1primo').value;
break;
default:;
}
}
This code works in all common browsers.
I dont know where your error is or how your html looks like, but this is a minimum of the case, which i understood.
function copy(){
var fromValue = document.getElementById('from').value;
var returnValue = document.getElementById('return').value;
document.getElementById('to').value = fromValue;
document.getElementById('toReturn').value = returnValue;
}
document.getElementById('copyBtn').addEventListener('click',copy);
<div>from:</div>
<div>
<input id="from"><input id="return">
</div>
<div>to:</div>
<div>
<input id="to"><input id="toReturn">
</div>
<button id="copyBtn">
Copy
</button>

How can I address the element that called a function from within the function?

I am trying this HTML code:
<button name="darkBlue" onclick="setThemeColor(this.name)">Blue</button>
<button name="black" onclick="setThemeColor(this.name)">Black</button>
and script:
function setThemeColor(buttonName) {
localStorage.themeColor = buttonName;
document.getElementsByTagName('html')[0].className = buttonName
var themeButtons = document.querySelectorAll(".theme");
for (var button in themeButtons) {
themeButtons[button].disabled = false;
}
// this.disabled = false;
// element.setAttribute("disabled", "disabled");
}
I am having a problem here setting the disabled state of the button that called the function. Can someone tell me how i can do this. I have tried two things but neither seem to work.
Pass in a reference to your button instead of just the name:
HTML
<button name="darkBlue" onclick="setThemeColor(this)">Blue</button>
<button name="black" onclick="setThemeColor(this)">Black</button>
JS
function setThemeColor(button) {
localStorage.themeColor = button.name;
document.getElementsByTagName('html')[0].className = button.name;
var themeButtons = document.querySelectorAll(".theme");
for (var button in themeButtons) {
themeButtons[button].setAttribute("disabled", "disabled");
}
button.setAttribute("disabled", "disabled");
}
document.getElementById("buttonid1").disabled=false;

Categories

Resources