How to change img with JavaScript using radio button and switch case?
I want to have a background image depending on the checked radio button, using a switch case. However I'm not finding the right solution to get the value from the checked radio button.
Snippet of my code:
HTML:
<section class="configurator__product">
...
</section>
<label for="blue" class="hidden">Blue</label>
<input type="radio" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
<label for="green" class="hidden">Green</label>
<input type="radio" id="green" name="color-totebag" value="tote-green" class="circle tote-green">
<label for="black" class="hidden">Black</label>
<input type="radio" id="black" name="color-totebag" value="tote-black" class="circle tote-black">
There's more inputs, 5 in total, hence the reason I don't think using if/else is optional. But I hope it gets clear with the amount of code I'm giving here.
JavaScript:
const changeTotebagColor = () => {
let totebagColor = document.getElementsByName(`color-totebag`).value;
const $totebagImg = document.querySelector(`.configurator__product`);
switch (totebagColor) {
case `tote-blue`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_blue')";
case `tote-green`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_green')";
case `tote-black`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_black')";
}
}
changeTotebagColor();
I hope it's a bit clear to what I'm trying to figure it out. I'm new to JavaScript, so maybe I'm doing this all wrong. I've tried numerous solutions online, however I had no luck. I would also like to avoid in-line JavaScript if possible, but I'm open to any solution at this point.
javascript checkbox switch-statement radio-button
asked Nov 21 '18 at 19:18
Sarah Van Den BergheSarah Van Den Berghe
12
add a comment |
I want to have a background image depending on the checked radio button, using a switch case. However I'm not finding the right solution to get the value from the checked radio button.
Snippet of my code:
HTML:
<section class="configurator__product">
...
</section>
<label for="blue" class="hidden">Blue</label>
<input type="radio" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
<label for="green" class="hidden">Green</label>
<input type="radio" id="green" name="color-totebag" value="tote-green" class="circle tote-green">
<label for="black" class="hidden">Black</label>
<input type="radio" id="black" name="color-totebag" value="tote-black" class="circle tote-black">
There's more inputs, 5 in total, hence the reason I don't think using if/else is optional. But I hope it gets clear with the amount of code I'm giving here.
JavaScript:
const changeTotebagColor = () => {
let totebagColor = document.getElementsByName(`color-totebag`).value;
const $totebagImg = document.querySelector(`.configurator__product`);
switch (totebagColor) {
case `tote-blue`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_blue')";
case `tote-green`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_green')";
case `tote-black`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_black')";
}
}
changeTotebagColor();
I hope it's a bit clear to what I'm trying to figure it out. I'm new to JavaScript, so maybe I'm doing this all wrong. I've tried numerous solutions online, however I had no luck. I would also like to avoid in-line JavaScript if possible, but I'm open to any solution at this point.
javascript checkbox switch-statement radio-button
asked Nov 21 '18 at 19:18
Sarah Van Den BergheSarah Van Den Berghe
12
You aren't setting up a listener or other to watch the inputs. You are simply calling your function which is going to call for the state that it is currently at not when you click it.
– basic
Nov 21 '18 at 19:27
add a comment |
I want to have a background image depending on the checked radio button, using a switch case. However I'm not finding the right solution to get the value from the checked radio button.
Snippet of my code:
HTML:
<section class="configurator__product">
...
</section>
<label for="blue" class="hidden">Blue</label>
<input type="radio" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
<label for="green" class="hidden">Green</label>
<input type="radio" id="green" name="color-totebag" value="tote-green" class="circle tote-green">
<label for="black" class="hidden">Black</label>
<input type="radio" id="black" name="color-totebag" value="tote-black" class="circle tote-black">
There's more inputs, 5 in total, hence the reason I don't think using if/else is optional. But I hope it gets clear with the amount of code I'm giving here.
JavaScript:
const changeTotebagColor = () => {
let totebagColor = document.getElementsByName(`color-totebag`).value;
const $totebagImg = document.querySelector(`.configurator__product`);
switch (totebagColor) {
case `tote-blue`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_blue')";
case `tote-green`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_green')";
case `tote-black`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_black')";
}
}
changeTotebagColor();
I hope it's a bit clear to what I'm trying to figure it out. I'm new to JavaScript, so maybe I'm doing this all wrong. I've tried numerous solutions online, however I had no luck. I would also like to avoid in-line JavaScript if possible, but I'm open to any solution at this point.
javascript checkbox switch-statement radio-button
asked Nov 21 '18 at 19:18
Sarah Van Den BergheSarah Van Den Berghe
12
I want to have a background image depending on the checked radio button, using a switch case. However I'm not finding the right solution to get the value from the checked radio button.
Snippet of my code:
HTML:
<section class="configurator__product">
...
</section>
<label for="blue" class="hidden">Blue</label>
<input type="radio" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
<label for="green" class="hidden">Green</label>
<input type="radio" id="green" name="color-totebag" value="tote-green" class="circle tote-green">
<label for="black" class="hidden">Black</label>
<input type="radio" id="black" name="color-totebag" value="tote-black" class="circle tote-black">
There's more inputs, 5 in total, hence the reason I don't think using if/else is optional. But I hope it gets clear with the amount of code I'm giving here.
JavaScript:
const changeTotebagColor = () => {
let totebagColor = document.getElementsByName(`color-totebag`).value;
const $totebagImg = document.querySelector(`.configurator__product`);
switch (totebagColor) {
case `tote-blue`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_blue')";
case `tote-green`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_green')";
case `tote-black`:
$totebagImg.style.backgroundImage = "url('assets/img/totebag_black')";
}
}
changeTotebagColor();
I hope it's a bit clear to what I'm trying to figure it out. I'm new to JavaScript, so maybe I'm doing this all wrong. I've tried numerous solutions online, however I had no luck. I would also like to avoid in-line JavaScript if possible, but I'm open to any solution at this point.
javascript checkbox switch-statement radio-button
javascript checkbox switch-statement radio-button
asked Nov 21 '18 at 19:18
Sarah Van Den BergheSarah Van Den Berghe
12
asked Nov 21 '18 at 19:18
Sarah Van Den BergheSarah Van Den Berghe
12
asked Nov 21 '18 at 19:18
Sarah Van Den BergheSarah Van Den Berghe
12
asked Nov 21 '18 at 19:18
Sarah Van Den BergheSarah Van Den Berghe
12
asked Nov 21 '18 at 19:18
Sarah Van Den BergheSarah Van Den Berghe
12
12
You aren't setting up a listener or other to watch the inputs. You are simply calling your function which is going to call for the state that it is currently at not when you click it.
– basic
Nov 21 '18 at 19:27
add a comment |
You aren't setting up a listener or other to watch the inputs. You are simply calling your function which is going to call for the state that it is currently at not when you click it.
– basic
Nov 21 '18 at 19:27
You aren't setting up a listener or other to watch the inputs. You are simply calling your function which is going to call for the state that it is currently at not when you click it.
– basic
Nov 21 '18 at 19:27
You aren't setting up a listener or other to watch the inputs. You are simply calling your function which is going to call for the state that it is currently at not when you click it.
– basic
Nov 21 '18 at 19:27
add a comment |
1 Answer
1
active
oldest
votes
As I mentioned in my comment, the way things are set up you are not actually firing your function when you click things. You call it after the function but that doesn't "watch" things.
You can resolve this in a few ways. The easiest would be (not changing to jquery or other and leaving your vanilla js alone) to simply apply an onclick to your radios.
Example:
<input type="radio" onclick="changeTotebagColor()" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
answered Nov 21 '18 at 19:36
basicbasic
2,29211226
add a comment |
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
});
}
});
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%2f53419132%2fhow-to-change-img-with-javascript-using-radio-button-and-switch-case%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
As I mentioned in my comment, the way things are set up you are not actually firing your function when you click things. You call it after the function but that doesn't "watch" things.
You can resolve this in a few ways. The easiest would be (not changing to jquery or other and leaving your vanilla js alone) to simply apply an onclick to your radios.
Example:
<input type="radio" onclick="changeTotebagColor()" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
answered Nov 21 '18 at 19:36
basicbasic
2,29211226
add a comment |
As I mentioned in my comment, the way things are set up you are not actually firing your function when you click things. You call it after the function but that doesn't "watch" things.
You can resolve this in a few ways. The easiest would be (not changing to jquery or other and leaving your vanilla js alone) to simply apply an onclick to your radios.
Example:
<input type="radio" onclick="changeTotebagColor()" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
answered Nov 21 '18 at 19:36
basicbasic
2,29211226
add a comment |
As I mentioned in my comment, the way things are set up you are not actually firing your function when you click things. You call it after the function but that doesn't "watch" things.
You can resolve this in a few ways. The easiest would be (not changing to jquery or other and leaving your vanilla js alone) to simply apply an onclick to your radios.
Example:
<input type="radio" onclick="changeTotebagColor()" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
answered Nov 21 '18 at 19:36
basicbasic
2,29211226
As I mentioned in my comment, the way things are set up you are not actually firing your function when you click things. You call it after the function but that doesn't "watch" things.
You can resolve this in a few ways. The easiest would be (not changing to jquery or other and leaving your vanilla js alone) to simply apply an onclick to your radios.
Example:
<input type="radio" onclick="changeTotebagColor()" id="blue" name="color-totebag" value="tote-blue" class="circle tote-blue">
answered Nov 21 '18 at 19:36
basicbasic
2,29211226
answered Nov 21 '18 at 19:36
basicbasic
2,29211226
answered Nov 21 '18 at 19:36
basicbasic
2,29211226
answered Nov 21 '18 at 19:36
basicbasic
2,29211226
2,29211226
add a comment |
add a comment |
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.
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%2f53419132%2fhow-to-change-img-with-javascript-using-radio-button-and-switch-case%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
You aren't setting up a listener or other to watch the inputs. You are simply calling your function which is going to call for the state that it is currently at not when you click it.
– basic
Nov 21 '18 at 19:27