Hiding element based on string content of an element
I'm trying to hide one element when the contents of an element contains a specific string with javascript.
Here is what I have so far:
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x == true) {
document.getElementById("divCheckoutQuestions").setAttribute("display",
"none");
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
javascript
add a comment |
I'm trying to hide one element when the contents of an element contains a specific string with javascript.
Here is what I have so far:
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x == true) {
document.getElementById("divCheckoutQuestions").setAttribute("display",
"none");
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
javascript
You are setting the wrong attribute. Try this.document.getElementById("divCheckoutQuestions").setAttribute("style", "display:none");
– theapologist
Nov 15 at 16:49
add a comment |
I'm trying to hide one element when the contents of an element contains a specific string with javascript.
Here is what I have so far:
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x == true) {
document.getElementById("divCheckoutQuestions").setAttribute("display",
"none");
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
javascript
I'm trying to hide one element when the contents of an element contains a specific string with javascript.
Here is what I have so far:
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x == true) {
document.getElementById("divCheckoutQuestions").setAttribute("display",
"none");
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x == true) {
document.getElementById("divCheckoutQuestions").setAttribute("display",
"none");
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x == true) {
document.getElementById("divCheckoutQuestions").setAttribute("display",
"none");
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
javascript
javascript
edited Nov 15 at 16:42
Federico klez Culloca
15.6k134275
15.6k134275
asked Nov 15 at 16:40
Holly Williford
406
406
You are setting the wrong attribute. Try this.document.getElementById("divCheckoutQuestions").setAttribute("style", "display:none");
– theapologist
Nov 15 at 16:49
add a comment |
You are setting the wrong attribute. Try this.document.getElementById("divCheckoutQuestions").setAttribute("style", "display:none");
– theapologist
Nov 15 at 16:49
You are setting the wrong attribute. Try this.
document.getElementById("divCheckoutQuestions").setAttribute("style", "display:none");
– theapologist
Nov 15 at 16:49
You are setting the wrong attribute. Try this.
document.getElementById("divCheckoutQuestions").setAttribute("style", "display:none");
– theapologist
Nov 15 at 16:49
add a comment |
5 Answers
5
active
oldest
votes
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x === true) {
document.getElementById("divCheckoutQuestions").style.display = "none"
}
try the above one.
Thanks! I did not realize you needed to console log variable first before adding them to conditional logic.
– Holly Williford
Nov 15 at 17:33
1
@HollyWilliford no, you don't need to console log first, it was just for debugging :)
– Luis Cabrera Benito
Nov 15 at 18:12
1
@HollyWilliford that added by mistake. removed.
– Raja Sekar
Nov 16 at 3:00
add a comment |
You should take .textContent instead of .innerHTML. Also you can avoid declaring the "x" and change the .setAttribute to .style. This way works fine.
var y = document.getElementById("radio_ship0").textContent;
if ( y.includes("LTL Freight")) {
document.getElementById("divCheckoutQuestions")
.style.display = 'none'
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
add a comment |
Your if is ok, but you are not hidding the element. Try this:
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x == true) {
// check the .style.display = "none";
document.getElementById("divCheckoutQuestions").style.display = "none"
}
Oh, btw your code could be simplified to this:
var y = document.getElementById("radio_ship0").innerHTML;
if (y.includes("LTL Freight")) {
document.getElementById("divCheckoutQuestions").style.display = "none"
}
You can Try it here in a jsfiddle
add a comment |
display
is not an attribute but a style property , so you cannot set display attribute like that.
var y = document.getElementById("radio_ship0").innerHTML.trim();
var x = y.includes("LTL Freight");
if (x) {
document.getElementById("divCheckoutQuestions").style.display = "none";
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
add a comment |
Try This:
x.style.display = y.includes("LTL Freight") ? "none" : "block" ;
var y = document.getElementById("radio_ship0").innerHTML ;
var x = document.getElementById("divCheckoutQuestions") ;
x.style.display = y.includes("LTL Freight") ? "none" : "block" ;
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
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%2f53324082%2fhiding-element-based-on-string-content-of-an-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x === true) {
document.getElementById("divCheckoutQuestions").style.display = "none"
}
try the above one.
Thanks! I did not realize you needed to console log variable first before adding them to conditional logic.
– Holly Williford
Nov 15 at 17:33
1
@HollyWilliford no, you don't need to console log first, it was just for debugging :)
– Luis Cabrera Benito
Nov 15 at 18:12
1
@HollyWilliford that added by mistake. removed.
– Raja Sekar
Nov 16 at 3:00
add a comment |
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x === true) {
document.getElementById("divCheckoutQuestions").style.display = "none"
}
try the above one.
Thanks! I did not realize you needed to console log variable first before adding them to conditional logic.
– Holly Williford
Nov 15 at 17:33
1
@HollyWilliford no, you don't need to console log first, it was just for debugging :)
– Luis Cabrera Benito
Nov 15 at 18:12
1
@HollyWilliford that added by mistake. removed.
– Raja Sekar
Nov 16 at 3:00
add a comment |
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x === true) {
document.getElementById("divCheckoutQuestions").style.display = "none"
}
try the above one.
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x === true) {
document.getElementById("divCheckoutQuestions").style.display = "none"
}
try the above one.
edited Nov 16 at 3:00
answered Nov 15 at 16:44
Raja Sekar
1,485621
1,485621
Thanks! I did not realize you needed to console log variable first before adding them to conditional logic.
– Holly Williford
Nov 15 at 17:33
1
@HollyWilliford no, you don't need to console log first, it was just for debugging :)
– Luis Cabrera Benito
Nov 15 at 18:12
1
@HollyWilliford that added by mistake. removed.
– Raja Sekar
Nov 16 at 3:00
add a comment |
Thanks! I did not realize you needed to console log variable first before adding them to conditional logic.
– Holly Williford
Nov 15 at 17:33
1
@HollyWilliford no, you don't need to console log first, it was just for debugging :)
– Luis Cabrera Benito
Nov 15 at 18:12
1
@HollyWilliford that added by mistake. removed.
– Raja Sekar
Nov 16 at 3:00
Thanks! I did not realize you needed to console log variable first before adding them to conditional logic.
– Holly Williford
Nov 15 at 17:33
Thanks! I did not realize you needed to console log variable first before adding them to conditional logic.
– Holly Williford
Nov 15 at 17:33
1
1
@HollyWilliford no, you don't need to console log first, it was just for debugging :)
– Luis Cabrera Benito
Nov 15 at 18:12
@HollyWilliford no, you don't need to console log first, it was just for debugging :)
– Luis Cabrera Benito
Nov 15 at 18:12
1
1
@HollyWilliford that added by mistake. removed.
– Raja Sekar
Nov 16 at 3:00
@HollyWilliford that added by mistake. removed.
– Raja Sekar
Nov 16 at 3:00
add a comment |
You should take .textContent instead of .innerHTML. Also you can avoid declaring the "x" and change the .setAttribute to .style. This way works fine.
var y = document.getElementById("radio_ship0").textContent;
if ( y.includes("LTL Freight")) {
document.getElementById("divCheckoutQuestions")
.style.display = 'none'
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
add a comment |
You should take .textContent instead of .innerHTML. Also you can avoid declaring the "x" and change the .setAttribute to .style. This way works fine.
var y = document.getElementById("radio_ship0").textContent;
if ( y.includes("LTL Freight")) {
document.getElementById("divCheckoutQuestions")
.style.display = 'none'
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
add a comment |
You should take .textContent instead of .innerHTML. Also you can avoid declaring the "x" and change the .setAttribute to .style. This way works fine.
var y = document.getElementById("radio_ship0").textContent;
if ( y.includes("LTL Freight")) {
document.getElementById("divCheckoutQuestions")
.style.display = 'none'
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
You should take .textContent instead of .innerHTML. Also you can avoid declaring the "x" and change the .setAttribute to .style. This way works fine.
var y = document.getElementById("radio_ship0").textContent;
if ( y.includes("LTL Freight")) {
document.getElementById("divCheckoutQuestions")
.style.display = 'none'
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
var y = document.getElementById("radio_ship0").textContent;
if ( y.includes("LTL Freight")) {
document.getElementById("divCheckoutQuestions")
.style.display = 'none'
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
var y = document.getElementById("radio_ship0").textContent;
if ( y.includes("LTL Freight")) {
document.getElementById("divCheckoutQuestions")
.style.display = 'none'
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
answered Nov 15 at 16:46
Osakr
56912
56912
add a comment |
add a comment |
Your if is ok, but you are not hidding the element. Try this:
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x == true) {
// check the .style.display = "none";
document.getElementById("divCheckoutQuestions").style.display = "none"
}
Oh, btw your code could be simplified to this:
var y = document.getElementById("radio_ship0").innerHTML;
if (y.includes("LTL Freight")) {
document.getElementById("divCheckoutQuestions").style.display = "none"
}
You can Try it here in a jsfiddle
add a comment |
Your if is ok, but you are not hidding the element. Try this:
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x == true) {
// check the .style.display = "none";
document.getElementById("divCheckoutQuestions").style.display = "none"
}
Oh, btw your code could be simplified to this:
var y = document.getElementById("radio_ship0").innerHTML;
if (y.includes("LTL Freight")) {
document.getElementById("divCheckoutQuestions").style.display = "none"
}
You can Try it here in a jsfiddle
add a comment |
Your if is ok, but you are not hidding the element. Try this:
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x == true) {
// check the .style.display = "none";
document.getElementById("divCheckoutQuestions").style.display = "none"
}
Oh, btw your code could be simplified to this:
var y = document.getElementById("radio_ship0").innerHTML;
if (y.includes("LTL Freight")) {
document.getElementById("divCheckoutQuestions").style.display = "none"
}
You can Try it here in a jsfiddle
Your if is ok, but you are not hidding the element. Try this:
var y = document.getElementById("radio_ship0").innerHTML;
var x = y.includes("LTL Freight");
if (x == true) {
// check the .style.display = "none";
document.getElementById("divCheckoutQuestions").style.display = "none"
}
Oh, btw your code could be simplified to this:
var y = document.getElementById("radio_ship0").innerHTML;
if (y.includes("LTL Freight")) {
document.getElementById("divCheckoutQuestions").style.display = "none"
}
You can Try it here in a jsfiddle
answered Nov 15 at 16:48
Luis Cabrera Benito
550310
550310
add a comment |
add a comment |
display
is not an attribute but a style property , so you cannot set display attribute like that.
var y = document.getElementById("radio_ship0").innerHTML.trim();
var x = y.includes("LTL Freight");
if (x) {
document.getElementById("divCheckoutQuestions").style.display = "none";
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
add a comment |
display
is not an attribute but a style property , so you cannot set display attribute like that.
var y = document.getElementById("radio_ship0").innerHTML.trim();
var x = y.includes("LTL Freight");
if (x) {
document.getElementById("divCheckoutQuestions").style.display = "none";
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
add a comment |
display
is not an attribute but a style property , so you cannot set display attribute like that.
var y = document.getElementById("radio_ship0").innerHTML.trim();
var x = y.includes("LTL Freight");
if (x) {
document.getElementById("divCheckoutQuestions").style.display = "none";
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
display
is not an attribute but a style property , so you cannot set display attribute like that.
var y = document.getElementById("radio_ship0").innerHTML.trim();
var x = y.includes("LTL Freight");
if (x) {
document.getElementById("divCheckoutQuestions").style.display = "none";
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
var y = document.getElementById("radio_ship0").innerHTML.trim();
var x = y.includes("LTL Freight");
if (x) {
document.getElementById("divCheckoutQuestions").style.display = "none";
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
var y = document.getElementById("radio_ship0").innerHTML.trim();
var x = y.includes("LTL Freight");
if (x) {
document.getElementById("divCheckoutQuestions").style.display = "none";
}
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
answered Nov 15 at 16:51
brk
25.4k31939
25.4k31939
add a comment |
add a comment |
Try This:
x.style.display = y.includes("LTL Freight") ? "none" : "block" ;
var y = document.getElementById("radio_ship0").innerHTML ;
var x = document.getElementById("divCheckoutQuestions") ;
x.style.display = y.includes("LTL Freight") ? "none" : "block" ;
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
add a comment |
Try This:
x.style.display = y.includes("LTL Freight") ? "none" : "block" ;
var y = document.getElementById("radio_ship0").innerHTML ;
var x = document.getElementById("divCheckoutQuestions") ;
x.style.display = y.includes("LTL Freight") ? "none" : "block" ;
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
add a comment |
Try This:
x.style.display = y.includes("LTL Freight") ? "none" : "block" ;
var y = document.getElementById("radio_ship0").innerHTML ;
var x = document.getElementById("divCheckoutQuestions") ;
x.style.display = y.includes("LTL Freight") ? "none" : "block" ;
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
Try This:
x.style.display = y.includes("LTL Freight") ? "none" : "block" ;
var y = document.getElementById("radio_ship0").innerHTML ;
var x = document.getElementById("divCheckoutQuestions") ;
x.style.display = y.includes("LTL Freight") ? "none" : "block" ;
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
var y = document.getElementById("radio_ship0").innerHTML ;
var x = document.getElementById("divCheckoutQuestions") ;
x.style.display = y.includes("LTL Freight") ? "none" : "block" ;
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
var y = document.getElementById("radio_ship0").innerHTML ;
var x = document.getElementById("divCheckoutQuestions") ;
x.style.display = y.includes("LTL Freight") ? "none" : "block" ;
<p id="radio_ship0">LTL Freight</p>
<div id="divCheckoutQuestions">test</div>
answered Nov 15 at 16:59
Ehsan
9,63431129
9,63431129
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53324082%2fhiding-element-based-on-string-content-of-an-element%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 are setting the wrong attribute. Try this.
document.getElementById("divCheckoutQuestions").setAttribute("style", "display:none");
– theapologist
Nov 15 at 16:49