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>

edited Nov 15 at 16:42

Federico klez Culloca

15.6k134275

asked Nov 15 at 16:40

Holly Williford

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 |

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>

edited Nov 15 at 16:42

Federico klez Culloca

15.6k134275

asked Nov 15 at 16:40

Holly Williford

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 |

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>

edited Nov 15 at 16:42

Federico klez Culloca

15.6k134275

asked Nov 15 at 16:40

Holly Williford

406

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

edited Nov 15 at 16:42

Federico klez Culloca

15.6k134275

asked Nov 15 at 16:40

Holly Williford

406

edited Nov 15 at 16:42

Federico klez Culloca

15.6k134275

asked Nov 15 at 16:40

Holly Williford

406

edited Nov 15 at 16:42

Federico klez Culloca

15.6k134275

edited Nov 15 at 16:42

Federico klez Culloca

15.6k134275

edited Nov 15 at 16:42

Federico klez Culloca

15.6k134275

asked Nov 15 at 16:40

Holly Williford

406

asked Nov 15 at 16:40

Holly Williford

406

asked Nov 15 at 16:40

Holly Williford

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

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.

edited Nov 16 at 3:00

answered Nov 15 at 16:44

Raja Sekar

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 |

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>

answered Nov 15 at 16:46

Osakr

56912

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

answered Nov 15 at 16:48

Luis Cabrera Benito

550310

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>

answered Nov 15 at 16:51

brk

25.4k31939

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>

answered Nov 15 at 16:59

Ehsan

9,63431129

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

5 Answers
5

active

oldest

votes

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.

edited Nov 16 at 3:00

answered Nov 15 at 16:44

Raja Sekar

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 |

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

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.

edited Nov 16 at 3:00

answered Nov 15 at 16:44

Raja Sekar

1,485621

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

edited Nov 16 at 3:00

answered Nov 15 at 16:44

Raja Sekar

1,485621

answered Nov 15 at 16:44

Raja Sekar

1,485621

answered Nov 15 at 16:44

Raja Sekar

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

@HollyWilliford no, you don't need to console log first, it was just for debugging :)
– Luis Cabrera Benito
Nov 15 at 18:12

@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>

answered Nov 15 at 16:46

Osakr

56912

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>

answered Nov 15 at 16:46

Osakr

56912

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>

answered Nov 15 at 16:46

Osakr

56912

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

answered Nov 15 at 16:46

Osakr

56912

answered Nov 15 at 16:46

Osakr

56912

answered Nov 15 at 16:46

Osakr

56912

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

answered Nov 15 at 16:48

Luis Cabrera Benito

550310

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

answered Nov 15 at 16:48

Luis Cabrera Benito

550310

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

answered Nov 15 at 16:48

Luis Cabrera Benito

550310

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

answered Nov 15 at 16:48

Luis Cabrera Benito

550310

answered Nov 15 at 16:48

Luis Cabrera Benito

550310

answered Nov 15 at 16:48

Luis Cabrera Benito

550310

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>

answered Nov 15 at 16:51

brk

25.4k31939

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>

answered Nov 15 at 16:51

brk

25.4k31939

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>

answered Nov 15 at 16:51

brk

25.4k31939

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

answered Nov 15 at 16:51

brk

25.4k31939

answered Nov 15 at 16:51

brk

25.4k31939

answered Nov 15 at 16:51

brk

25.4k31939

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>

answered Nov 15 at 16:59

Ehsan

9,63431129

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>

answered Nov 15 at 16:59

Ehsan

9,63431129

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>

answered Nov 15 at 16:59

Ehsan

9,63431129

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

answered Nov 15 at 16:59

Ehsan

9,63431129

answered Nov 15 at 16:59

Ehsan

9,63431129

answered Nov 15 at 16:59

Ehsan

9,63431129

add a comment |

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.

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky