js function onclick needs to click one time to change the font
1
an event is working fine in js when clicked twice to change the font.I want same should work on single click as well.
js code is below.
function changered() {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
}) }
HTML code is below.
<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right"></i>
</div>
</a>
javascript jquery html html5 css3
edited Jan 1 at 8:23
Umar Abdullah
883418
asked Dec 31 '18 at 12:34
faseehfaseeh
668
add a comment |
1
an event is working fine in js when clicked twice to change the font.I want same should work on single click as well.
js code is below.
function changered() {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
}) }
HTML code is below.
<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right"></i>
</div>
</a>
javascript jquery html html5 css3
edited Jan 1 at 8:23
Umar Abdullah
883418
asked Dec 31 '18 at 12:34
faseehfaseeh
668
add a comment |
1
1
1
an event is working fine in js when clicked twice to change the font.I want same should work on single click as well.
js code is below.
function changered() {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
}) }
HTML code is below.
<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right"></i>
</div>
</a>
javascript jquery html html5 css3
edited Jan 1 at 8:23
Umar Abdullah
883418
asked Dec 31 '18 at 12:34
faseehfaseeh
668
an event is working fine in js when clicked twice to change the font.I want same should work on single click as well.
js code is below.
function changered() {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
}) }
HTML code is below.
<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right"></i>
</div>
</a>
javascript jquery html html5 css3
javascript jquery html html5 css3
edited Jan 1 at 8:23
Umar Abdullah
883418
asked Dec 31 '18 at 12:34
faseehfaseeh
668
edited Jan 1 at 8:23
Umar Abdullah
883418
asked Dec 31 '18 at 12:34
faseehfaseeh
668
edited Jan 1 at 8:23
Umar Abdullah
883418
edited Jan 1 at 8:23
Umar Abdullah
883418
edited Jan 1 at 8:23
Umar Abdullah
883418
883418
asked Dec 31 '18 at 12:34
faseehfaseeh
668
asked Dec 31 '18 at 12:34
faseehfaseeh
668
asked Dec 31 '18 at 12:34
faseehfaseeh
668
668
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
2
The problem is that you are setting the eventlistener after the first click, that's why you need the first click.
I'm not sure if it fits your needs since its a little different but you can change the color on the changered callback instead of adding an event listener. Something like:
function changered() {
icon = document.getElementById('iconsred');
icon.classList.toggle('fas');
icon.style.color= "#ff0000";
}
answered Dec 31 '18 at 13:10
arieljuodarieljuod
6,69611121
yes why i didn't thought of doing it this way!! thank you @arieljoud you're a life saver :)
– faseeh
Dec 31 '18 at 13:11
add a comment |
1
Any reason why you add the click event on the <a>?
iconsred does not have a click event, before you run changered() that is why you need to click it twice.
You could do it like this:
var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})
Demo
var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})<a href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>answered Dec 31 '18 at 12:39
Carsten Løvbo AndersenCarsten Løvbo Andersen
14.7k82957
i thought a is the main tag so calling it on the anchor will solve my problem but nothing happen
– faseeh
Dec 31 '18 at 12:45
it still doing the same thing working on double click after i put event in <i> tag wher im calling the font
– faseeh
Dec 31 '18 at 12:51
add a comment |
0
It's because you create a new eventListener the first time it is clicked, and therefore it works the second time you make the click.
You can add it to the document, and only react on the specific element if you give it an id:
document.addEventListener('click', function(event) {
if(e.target.id === "yourId") {
event.target.style.color= "#ff0000";
}
})
answered Dec 31 '18 at 12:39
RoiRoi
494111
it's not working with this
– faseeh
Dec 31 '18 at 12:43
add a comment |
0
You can try this.
After DOM loaded we are adding listener.
document.addEventListener("DOMContentLoaded", function(event) {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
})
});<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>answered Dec 31 '18 at 12:45
Erdem OzdemirErdem Ozdemir
362
i tried you're code @erdem but nothing happened
– faseeh
Dec 31 '18 at 12:48
Actually in inspect i can see classlist toggle works. Do you want to change the color ?
– Erdem Ozdemir
Dec 31 '18 at 12:51
im changing the font as you can see in html im calling class = "far fa-thumbs-down " and on click it'll change to the filled thumbs up which is also a font called from js "event.target.classList.toggle('fas')"
– faseeh
Dec 31 '18 at 12:53
@ErdemOzdemir You have not definediconsredanywhere
– Carsten Løvbo Andersen
Dec 31 '18 at 12:56
@CarstenLøvboAndersen because not necessary :) Give it a try and try to select <i> tag and just write console "iconsred". You will see it's select <i> tag
– Erdem Ozdemir
Dec 31 '18 at 12:59
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53987597%2fjs-function-onclick-needs-to-click-one-time-to-change-the-font%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
The problem is that you are setting the eventlistener after the first click, that's why you need the first click.
I'm not sure if it fits your needs since its a little different but you can change the color on the changered callback instead of adding an event listener. Something like:
function changered() {
icon = document.getElementById('iconsred');
icon.classList.toggle('fas');
icon.style.color= "#ff0000";
}
answered Dec 31 '18 at 13:10
arieljuodarieljuod
6,69611121
yes why i didn't thought of doing it this way!! thank you @arieljoud you're a life saver :)
– faseeh
Dec 31 '18 at 13:11
add a comment |
2
The problem is that you are setting the eventlistener after the first click, that's why you need the first click.
I'm not sure if it fits your needs since its a little different but you can change the color on the changered callback instead of adding an event listener. Something like:
function changered() {
icon = document.getElementById('iconsred');
icon.classList.toggle('fas');
icon.style.color= "#ff0000";
}
answered Dec 31 '18 at 13:10
arieljuodarieljuod
6,69611121
yes why i didn't thought of doing it this way!! thank you @arieljoud you're a life saver :)
– faseeh
Dec 31 '18 at 13:11
add a comment |
2
2
2
The problem is that you are setting the eventlistener after the first click, that's why you need the first click.
I'm not sure if it fits your needs since its a little different but you can change the color on the changered callback instead of adding an event listener. Something like:
function changered() {
icon = document.getElementById('iconsred');
icon.classList.toggle('fas');
icon.style.color= "#ff0000";
}
answered Dec 31 '18 at 13:10
arieljuodarieljuod
6,69611121
The problem is that you are setting the eventlistener after the first click, that's why you need the first click.
I'm not sure if it fits your needs since its a little different but you can change the color on the changered callback instead of adding an event listener. Something like:
function changered() {
icon = document.getElementById('iconsred');
icon.classList.toggle('fas');
icon.style.color= "#ff0000";
}
answered Dec 31 '18 at 13:10
arieljuodarieljuod
6,69611121
answered Dec 31 '18 at 13:10
arieljuodarieljuod
6,69611121
answered Dec 31 '18 at 13:10
arieljuodarieljuod
6,69611121
answered Dec 31 '18 at 13:10
arieljuodarieljuod
6,69611121
6,69611121
yes why i didn't thought of doing it this way!! thank you @arieljoud you're a life saver :)
– faseeh
Dec 31 '18 at 13:11
add a comment |
yes why i didn't thought of doing it this way!! thank you @arieljoud you're a life saver :)
– faseeh
Dec 31 '18 at 13:11
yes why i didn't thought of doing it this way!! thank you @arieljoud you're a life saver :)
– faseeh
Dec 31 '18 at 13:11
yes why i didn't thought of doing it this way!! thank you @arieljoud you're a life saver :)
– faseeh
Dec 31 '18 at 13:11
add a comment |
1
Any reason why you add the click event on the <a>?
iconsred does not have a click event, before you run changered() that is why you need to click it twice.
You could do it like this:
var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})
Demo
var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})<a href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>answered Dec 31 '18 at 12:39
Carsten Løvbo AndersenCarsten Løvbo Andersen
14.7k82957
i thought a is the main tag so calling it on the anchor will solve my problem but nothing happen
– faseeh
Dec 31 '18 at 12:45
it still doing the same thing working on double click after i put event in <i> tag wher im calling the font
– faseeh
Dec 31 '18 at 12:51
add a comment |
1
Any reason why you add the click event on the <a>?
iconsred does not have a click event, before you run changered() that is why you need to click it twice.
You could do it like this:
var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})
Demo
var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})<a href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>answered Dec 31 '18 at 12:39
Carsten Løvbo AndersenCarsten Løvbo Andersen
14.7k82957
i thought a is the main tag so calling it on the anchor will solve my problem but nothing happen
– faseeh
Dec 31 '18 at 12:45
it still doing the same thing working on double click after i put event in <i> tag wher im calling the font
– faseeh
Dec 31 '18 at 12:51
add a comment |
1
1
1
Any reason why you add the click event on the <a>?
iconsred does not have a click event, before you run changered() that is why you need to click it twice.
You could do it like this:
var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})
Demo
var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})<a href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>answered Dec 31 '18 at 12:39
Carsten Løvbo AndersenCarsten Løvbo Andersen
14.7k82957
Any reason why you add the click event on the <a>?
iconsred does not have a click event, before you run changered() that is why you need to click it twice.
You could do it like this:
var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})
Demo
var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})<a href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})<a href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})<a href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>answered Dec 31 '18 at 12:39
Carsten Løvbo AndersenCarsten Løvbo Andersen
14.7k82957
answered Dec 31 '18 at 12:39
Carsten Løvbo AndersenCarsten Løvbo Andersen
14.7k82957
answered Dec 31 '18 at 12:39
Carsten Løvbo AndersenCarsten Løvbo Andersen
14.7k82957
answered Dec 31 '18 at 12:39
Carsten Løvbo AndersenCarsten Løvbo Andersen
14.7k82957
14.7k82957
i thought a is the main tag so calling it on the anchor will solve my problem but nothing happen
– faseeh
Dec 31 '18 at 12:45
it still doing the same thing working on double click after i put event in <i> tag wher im calling the font
– faseeh
Dec 31 '18 at 12:51
add a comment |
i thought a is the main tag so calling it on the anchor will solve my problem but nothing happen
– faseeh
Dec 31 '18 at 12:45
it still doing the same thing working on double click after i put event in <i> tag wher im calling the font
– faseeh
Dec 31 '18 at 12:51
i thought a is the main tag so calling it on the anchor will solve my problem but nothing happen
– faseeh
Dec 31 '18 at 12:45
i thought a is the main tag so calling it on the anchor will solve my problem but nothing happen
– faseeh
Dec 31 '18 at 12:45
it still doing the same thing working on double click after i put event in <i> tag wher im calling the font
– faseeh
Dec 31 '18 at 12:51
it still doing the same thing working on double click after i put event in <i> tag wher im calling the font
– faseeh
Dec 31 '18 at 12:51
add a comment |
0
It's because you create a new eventListener the first time it is clicked, and therefore it works the second time you make the click.
You can add it to the document, and only react on the specific element if you give it an id:
document.addEventListener('click', function(event) {
if(e.target.id === "yourId") {
event.target.style.color= "#ff0000";
}
})
answered Dec 31 '18 at 12:39
RoiRoi
494111
it's not working with this
– faseeh
Dec 31 '18 at 12:43
add a comment |
0
It's because you create a new eventListener the first time it is clicked, and therefore it works the second time you make the click.
You can add it to the document, and only react on the specific element if you give it an id:
document.addEventListener('click', function(event) {
if(e.target.id === "yourId") {
event.target.style.color= "#ff0000";
}
})
answered Dec 31 '18 at 12:39
RoiRoi
494111
it's not working with this
– faseeh
Dec 31 '18 at 12:43
add a comment |
0
0
0
It's because you create a new eventListener the first time it is clicked, and therefore it works the second time you make the click.
You can add it to the document, and only react on the specific element if you give it an id:
document.addEventListener('click', function(event) {
if(e.target.id === "yourId") {
event.target.style.color= "#ff0000";
}
})
answered Dec 31 '18 at 12:39
RoiRoi
494111
It's because you create a new eventListener the first time it is clicked, and therefore it works the second time you make the click.
You can add it to the document, and only react on the specific element if you give it an id:
document.addEventListener('click', function(event) {
if(e.target.id === "yourId") {
event.target.style.color= "#ff0000";
}
})
answered Dec 31 '18 at 12:39
RoiRoi
494111
answered Dec 31 '18 at 12:39
RoiRoi
494111
answered Dec 31 '18 at 12:39
RoiRoi
494111
answered Dec 31 '18 at 12:39
RoiRoi
494111
494111
it's not working with this
– faseeh
Dec 31 '18 at 12:43
add a comment |
it's not working with this
– faseeh
Dec 31 '18 at 12:43
it's not working with this
– faseeh
Dec 31 '18 at 12:43
it's not working with this
– faseeh
Dec 31 '18 at 12:43
add a comment |
0
You can try this.
After DOM loaded we are adding listener.
document.addEventListener("DOMContentLoaded", function(event) {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
})
});<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>answered Dec 31 '18 at 12:45
Erdem OzdemirErdem Ozdemir
362
i tried you're code @erdem but nothing happened
– faseeh
Dec 31 '18 at 12:48
Actually in inspect i can see classlist toggle works. Do you want to change the color ?
– Erdem Ozdemir
Dec 31 '18 at 12:51
im changing the font as you can see in html im calling class = "far fa-thumbs-down " and on click it'll change to the filled thumbs up which is also a font called from js "event.target.classList.toggle('fas')"
– faseeh
Dec 31 '18 at 12:53
@ErdemOzdemir You have not definediconsredanywhere
– Carsten Løvbo Andersen
Dec 31 '18 at 12:56
@CarstenLøvboAndersen because not necessary :) Give it a try and try to select <i> tag and just write console "iconsred". You will see it's select <i> tag
– Erdem Ozdemir
Dec 31 '18 at 12:59
|
show 3 more comments
0
You can try this.
After DOM loaded we are adding listener.
document.addEventListener("DOMContentLoaded", function(event) {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
})
});<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>answered Dec 31 '18 at 12:45
Erdem OzdemirErdem Ozdemir
362
i tried you're code @erdem but nothing happened
– faseeh
Dec 31 '18 at 12:48
Actually in inspect i can see classlist toggle works. Do you want to change the color ?
– Erdem Ozdemir
Dec 31 '18 at 12:51
im changing the font as you can see in html im calling class = "far fa-thumbs-down " and on click it'll change to the filled thumbs up which is also a font called from js "event.target.classList.toggle('fas')"
– faseeh
Dec 31 '18 at 12:53
@ErdemOzdemir You have not definediconsredanywhere
– Carsten Løvbo Andersen
Dec 31 '18 at 12:56
@CarstenLøvboAndersen because not necessary :) Give it a try and try to select <i> tag and just write console "iconsred". You will see it's select <i> tag
– Erdem Ozdemir
Dec 31 '18 at 12:59
|
show 3 more comments
0
0
0
You can try this.
After DOM loaded we are adding listener.
document.addEventListener("DOMContentLoaded", function(event) {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
})
});<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>answered Dec 31 '18 at 12:45
Erdem OzdemirErdem Ozdemir
362
You can try this.
After DOM loaded we are adding listener.
document.addEventListener("DOMContentLoaded", function(event) {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
})
});<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>document.addEventListener("DOMContentLoaded", function(event) {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
})
});<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>document.addEventListener("DOMContentLoaded", function(event) {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
})
});<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>answered Dec 31 '18 at 12:45
Erdem OzdemirErdem Ozdemir
362
answered Dec 31 '18 at 12:45
Erdem OzdemirErdem Ozdemir
362
answered Dec 31 '18 at 12:45
Erdem OzdemirErdem Ozdemir
362
answered Dec 31 '18 at 12:45
Erdem OzdemirErdem Ozdemir
362
362
i tried you're code @erdem but nothing happened
– faseeh
Dec 31 '18 at 12:48
Actually in inspect i can see classlist toggle works. Do you want to change the color ?
– Erdem Ozdemir
Dec 31 '18 at 12:51
im changing the font as you can see in html im calling class = "far fa-thumbs-down " and on click it'll change to the filled thumbs up which is also a font called from js "event.target.classList.toggle('fas')"
– faseeh
Dec 31 '18 at 12:53
@ErdemOzdemir You have not definediconsredanywhere
– Carsten Løvbo Andersen
Dec 31 '18 at 12:56
@CarstenLøvboAndersen because not necessary :) Give it a try and try to select <i> tag and just write console "iconsred". You will see it's select <i> tag
– Erdem Ozdemir
Dec 31 '18 at 12:59
|
show 3 more comments
i tried you're code @erdem but nothing happened
– faseeh
Dec 31 '18 at 12:48
Actually in inspect i can see classlist toggle works. Do you want to change the color ?
– Erdem Ozdemir
Dec 31 '18 at 12:51
im changing the font as you can see in html im calling class = "far fa-thumbs-down " and on click it'll change to the filled thumbs up which is also a font called from js "event.target.classList.toggle('fas')"
– faseeh
Dec 31 '18 at 12:53
@ErdemOzdemir You have not definediconsredanywhere
– Carsten Løvbo Andersen
Dec 31 '18 at 12:56
@CarstenLøvboAndersen because not necessary :) Give it a try and try to select <i> tag and just write console "iconsred". You will see it's select <i> tag
– Erdem Ozdemir
Dec 31 '18 at 12:59
i tried you're code @erdem but nothing happened
– faseeh
Dec 31 '18 at 12:48
i tried you're code @erdem but nothing happened
– faseeh
Dec 31 '18 at 12:48
Actually in inspect i can see classlist toggle works. Do you want to change the color ?
– Erdem Ozdemir
Dec 31 '18 at 12:51
Actually in inspect i can see classlist toggle works. Do you want to change the color ?
– Erdem Ozdemir
Dec 31 '18 at 12:51
im changing the font as you can see in html im calling class = "far fa-thumbs-down " and on click it'll change to the filled thumbs up which is also a font called from js "event.target.classList.toggle('fas')"
– faseeh
Dec 31 '18 at 12:53
im changing the font as you can see in html im calling class = "far fa-thumbs-down " and on click it'll change to the filled thumbs up which is also a font called from js "event.target.classList.toggle('fas')"
– faseeh
Dec 31 '18 at 12:53
@ErdemOzdemir You have not defined
iconsred anywhere– Carsten Løvbo Andersen
Dec 31 '18 at 12:56
@ErdemOzdemir You have not defined
iconsred anywhere– Carsten Løvbo Andersen
Dec 31 '18 at 12:56
@CarstenLøvboAndersen because not necessary :) Give it a try and try to select <i> tag and just write console "iconsred". You will see it's select <i> tag
– Erdem Ozdemir
Dec 31 '18 at 12:59
@CarstenLøvboAndersen because not necessary :) Give it a try and try to select <i> tag and just write console "iconsred". You will see it's select <i> tag
– Erdem Ozdemir
Dec 31 '18 at 12:59
|
show 3 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53987597%2fjs-function-onclick-needs-to-click-one-time-to-change-the-font%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
