So, i have this javascript code:
function check(x) {
elements = document.getElementsByClassName(x);
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "yellow";
}
}
With this code, i can change the backgroundColor of anything with any class in my html page.
I have many "a" tags with differents class, for example:
<a class="1" onclick="check(this.className)">text 1</a>
<a class="2" onclick="check(this.className)">text 2</a>
<a class="3" onclick="check(this.className)">text 3</a>
<a class="4" onclick="check(this.className)">text 4</a>
And when I click on then I can change background color.
My problem is when I try to save this change in localStorage. I´m wanting to save the background color change to, on load page, check if users have clicked to change background color or not, for example:
function check(x) {
elements = document.getElementsByClassName(x);
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "yellow";
}
if (localStorage[x] != "yellow") {
elements[i].style.color = "yellow";
localStorage[x] = "yellow";
} else {
elements[i].style.color = "";
localStorage[x] = "";
}
}
window.onload = function() {
if (localStorage[x]) {
elements[i].style.backgroundColor = localStorage[x];
}
}
This is the way i found to highlight text user think is interting and he wants to mark, but this is not working.
Can someone helps me with this?
You can do something like
function check(x) {
var elements = document.getElementsByClassName(x);
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "yellow";
}
var colors = localStorage.getItem('colors');
colors = colors ? colors.split(',') : [];
if (colors.indexOf(x) == -1) {
colors.push(x);
localStorage.setItem('colors', colors.join(','));
}
console.log(colors, localStorage.getItem('colors'))
}
window.onload = function () {
var colors = localStorage.getItem('colors');
if (colors) {
colors = colors.split(',');
for (var i = 0; i < colors.length; i++) {
check(colors[i])
}
}
}
Demo: Fiddle
Put everything in a for loop:
function check(x) {
elements = document.getElementsByClassName(x);
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "yellow";
if (localStorage[x] != "yellow") {
elements[i].style.color = "yellow";
localStorage[x] = "yellow";
} else {
elements[i].style.color = "";
localStorage[x] = "";
}
}
}
window.onload = function() {
var elements = document.getElementsByClassName("a");
for (var i = 0; i < elements.length; i++) {
if (localStorage[x]) {
elements[i].style.backgroundColor = localStorage[x];
}
}
}
Note that i have document.getElementsByClassName("a") in the second loop, replace "a" with whatever class that all your tags share.
Related
Im working on an image carrousell with some custom code:
<script>
const project1Btn = document.getElementById("project1Btn");
project1Btn.addEventListener("click", showProject1Info);
function showProject1Info() {
document.getElementById("imageCarousell1").style.opacity = '50%';
document.getElementById("imageCarousell1").style.filter = "grayscale(100%)";
var elements = document.getElementsByClassName('projectBtn'),
i, len;
for (i = 0, len = elements.length; i < len; i++) {
elements[i].style.color = '#F5FF00';
}
}
document.addEventListener("click", (event) => {
const isClickInside = project1Btn.contains(event.target);
if (!isClickInside) {
document.getElementById("imageCarousell1").style.opacity = '100%';
document.getElementById("imageCarousell1").style.filter = "grayscale(0%)";
var elements = document.getElementsByClassName('projectBtn'),
i, len;
for (i = 0, len = elements.length; i < len; i++) {
elements[i].style.color = 'black';
}
}
});
</script>
The image opacity and also color changes on Btn Click but if i close the overlay the button color stays in the wrong color and i dont know how to fix that. :(
Live Preview:
https://mauricedill.ch/projects/
there is some images with grayscale(1) by default and when you hover on images it should change to grayscale(0), all of this is on css file. but i want when i click on it or when i hover on it, on both situations the image gets grayscale(0) but the hover effect doesn't work. i tried to put the code for grayscale(0) on an addEventListener in another function but it didn't work.
update:
i added codpen link and one line of code.
as you can see from the beginning left person is coloured because i'm showing their info. i want that when i hover on other persons, they get coloured theme while the person that their info is up is still coloured.
link
showInfo(0);
function showInfo(person) {
var img, info, names;
names = document.querySelectorAll('.box h2');
for (let i = 0; i < names.length; i++) {
names[i].style.display = 'none';
}
names[person].style.display = 'block';
info = document.querySelectorAll('.info p');
for (let i = 0; i < info.length; i++) {
info[i].style.display = 'none';
}
info[person].style.display = 'block';
img = document.querySelectorAll('.images img');
for (let i = 0; i < img.length; i++) {
img[i].style.filter= 'grayscale(1)';
}
img[person].style.filter= 'grayscale(0)';
}
I have updated your showInfo function:
function showInfo(person) {
var img, info, names;
names = document.querySelectorAll('.box h2');
for (let i = 0; i < names.length; i++) {
names[i].style.display = 'none';
}
names[person].style.display = 'block';
info = document.querySelectorAll('.info p');
for (let i = 0; i < info.length; i++) {
info[i].style.display = 'none';
}
info[person].style.display = 'block';
img = document.querySelectorAll('.images img');
for (let i = 0; i < img.length; i++) {
img[i].style.filter= '';
}
img[person].style.filter= 'grayscale(0)';
}
showInfo(0);
The change is very small and that gets you to the required behaviour:
for (let i = 0; i < img.length; i++) {
img[i].style.filter= '';
}
I have a number of elements on a page which may have a background colour pink, yellow or blue. These elements all carry a respective class, for example blue:
Arnaldus Garnieri
I have three buttons for removing each of these respective background colours,
<span id="clear-doc-person-blue" class="fake_link" onclick="clearentitycolour(this.id)">clear all</span>
<span id="clear-doc-place-pink" class="fake_link" onclick="clearentitycolour(this.id)">clear all</span>
<span id="clear-doc-segment-yellow" class="fake_link" onclick="clearentitycolour(this.id)">clear all</span>
The buttons call to the same function, which should read the element id name and determine which class to select for updating all style.backgroundColor = "none"
function clearentitycolour(clicked_id)
{
switch(clicked_id) {
case "clear-doc-person-blue":
var x = document.getElementsByClassName("doc-person-blue");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "none";}
break;
case "clear-doc-place-pink":
var x = document.getElementsByClassName("doc-place-pink");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "none";}
break;
case "clear-doc-segment-yellow":
var x = document.getElementsByClassName("doc-segment-yellow");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "none";}
break;
}}
It doesn't do anything, and I don't see why.
Many thanks in advance.
Your code is working fine; just one bug – instead of background-color: 'none' you have to use background-color: 'transparent'.
function clearentitycolour(clicked_id)
{
console.log(clicked_id)
switch(clicked_id) {
case "clear-doc-person-blue":
var x = document.getElementsByClassName("doc-person-blue");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "transparent";}
break;
case "clear-doc-place-pink":
var x = document.getElementsByClassName("doc-place-pink");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "transparent";}
break;
case "clear-doc-segment-yellow":
var x = document.getElementsByClassName("doc-segment-yellow");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "transparent";}
break;
}}
.doc-person-blue {
background-color: lightblue;
}
<span id="clear-doc-person-blue" class="fake_link" onclick="clearentitycolour(this.id)">clear blue</span>
Arnaldus Garnieri
On click you have to pass only this
Then you switch the id
None is not a valid value, you need to use transparent
x[i].style["background-color"] = "transparent";
function clearentitycolour(clicked_id)
{
switch(clicked_id.id) {
case "clear-doc-person-blue":
var x = document.getElementsByClassName("doc-person-blue");
var i;
for (i = 0; i < x.length; i++) {
x[i].style["background-color"] = "transparent";}
break;
case "clear-doc-place-pink":
var x = document.getElementsByClassName("doc-place-pink");
var i;
for (i = 0; i < x.length; i++) {
x[i].style["background-color"] = "transparent";}
break;
case "clear-doc-segment-yellow":
var x = document.getElementsByClassName("doc-segment-yellow");
var i;
for (i = 0; i < x.length; i++) {
x[i].style["background-color"] = "transparent";}
break;
}}
.doc-person-blue {
background-color: red;
}
Arnaldus Garnieri
I have three buttons for removing each of these respective background colours,
<span id="clear-doc-person-blue" class="fake_link" onclick="clearentitycolour(this)">clear all</span>
<span id="clear-doc-place-pink" class="fake_link" onclick="clearentitycolour(this)">clear all</span>
<span id="clear-doc-segment-yellow" class="fake_link" onclick="clearentitycolour(this)">clear all</span>
The buttons call to the same function, which should read the element id name and determine which class to select for updating all style.backgroundColor = "none"
Just looking at the code, there is really no need to have the switch statement in this instance. Perhaps could be trimmed to this.
function clearentitycolour(classToClear)
{
console.log(classToClear);
var x = document.getElementsByClassName(classToClear);
for (var i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "transparent";
}
}
.doc-person-blue {
background-color: lightblue;
}
<span id="clear-doc-person-blue" class="fake_link" onclick="clearentitycolour('doc-person-blue')">clear all</span>
<span id="clear-doc-place-pink" class="fake_link" onclick="clearentitycolour('doc-place-pink')">clear all</span>
<span id="clear-doc-segment-yellow" class="fake_link" onclick="clearentitycolour('doc-segment-yellow')">clear all</span>
Arnaldus Garnieri
Hello i want to remove "Have you served in the military ?" and "No" if Answer is "No" but when it will "Yes" than it should show.
Whatever i have tried but it's not working
<script type="text/javascript">
(function(){
for(i = 0; (a = document.getElementsByTagName("td")[i]); i++){
if(document.getElementsByTagName("span")[i].innerHTML.indexOf('Have you served in the military') > -1){
document.getElementsByTagName("td")[i].style.display = "none";
}
}
})();
</script>
You could use child of the element or just do a find replace or even hide and show.
You can get all td elements like you already did and than get the span elements inside them:
var tds = document.getElementsByTagName('TD');
for (var i = 0, l = tds.length; i != l; ++i) {
var spans = tds[i].getElementsByTagName('SPAN');
for (var j = 0, l2 = spans.length; j != l2; ++j) {
var span = spans[j];
if ((span.textContent = span.innerText).indexOf('Have you served in the military') != -1) {
span.style.display = 'none';
break;
}
}
}
EDIT: OP wants to only delete the span if there is a td with the content "No" (also delete the td element)
var tds = document.getElementsByTagName('TD');
var tdsLength = tds.length;
var answerNoFound = false;
for (var i = 0; i != tdsLength; ++i) {
var td = tds[i];
if ((td.textContent = td.innerText) == 'No') {
td.style.display = 'none';
answerNoFound = true;
break;
}
}
if (answerNoFound)
for (var i = 0; i != tdsLength; ++i) {
var spanFound = false;
var spans = tds[i].getElementsByTagName('SPAN');
for (var j = 0, l = spans.length; j != l; ++j) {
var span = spans[j];
if ((span.textContent = span.innerText).indexOf('Have you served in the military') != -1) {
span.style.display = 'none';
spanFound = true;
break;
}
}
if (spanFound)
break;
}
It looks like you have an application form and document probably has more spans, some outside the td elements, so you don't get correct selection of spans versus td.
So when you are comparing span content, it is most likely not the span that is inside your looped td.
<script type="text/javascript">
(function(){
for(i = 0; (a = document.getElementsByTagName("td")[i]); i++){
if(a.getElementsByTagName("span")[0].innerHTML.indexOf('Have you served in the military') > -1){
a.style.display = "none";
}
}
})();
</script>
I changed the if statement to select span inside your looped td, that should do it.
I am trying to write a javascript for hidding all elements of the class "prewrap", when any image on
the webpage is clicked.
Code so far:
<script type="text/javascript">
function hidepre() {
var elems = document.getElementsByClassName("prewrap");
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.visibility === "hidden") {
elems[i].style.visibility = "visible";
} else {
elems[i].style.visibility = "hidden";
}
}
}
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = "hidepre()";
}
</script>
Jsfiddle: http://jsfiddle.net/aX5kQ/
But this is not working at all, any idea what went wrong?
Your code is working, check this fiddle DEMO
EDIT
Remove the script tag from your jsfiddle leave only the code.
function hidepre() {
var elems = document.getElementsByClassName("prewrap");
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.display === "none") {
elems[i].style.display = "block";
} else {
elems[i].style.display = "none";
}
}
}
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = hidepre;
}
Also in your post this line should be corrected ->
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = hidepre; //this line - here should only be the name of the function without quotes and parentheses
}
It works just fine if you remove the script tag from the JS area of jsfiddle (you put raw javascript in there.. no tags)
edited demo at http://jsfiddle.net/aX5kQ/1/
Hi this code is executed immediately before the image is loaded and so no img is found.
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = "hidepre()";
}
Execute this when the DOM is finished loading with window.onload = ...