Hiding element based on string content of an element












1














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>












share|improve this question
























  • You are setting the wrong attribute. Try this. document.getElementById("divCheckoutQuestions").setAttribute("style", "display:none");
    – theapologist
    Nov 15 at 16:49


















1














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>












share|improve this question
























  • You are setting the wrong attribute. Try this. document.getElementById("divCheckoutQuestions").setAttribute("style", "display:none");
    – theapologist
    Nov 15 at 16:49
















1












1








1







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>












share|improve this question















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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




















  • 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














5 Answers
5






active

oldest

votes


















1














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.






share|improve this answer























  • 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



















1














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>








share|improve this answer





























    1














    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






    share|improve this answer





























      1














      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>








      share|improve this answer





























        1














        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>








        share|improve this answer





















          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


















          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









          1














          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.






          share|improve this answer























          • 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
















          1














          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.






          share|improve this answer























          • 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














          1












          1








          1






          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.






          share|improve this answer














          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.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          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


















          • 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













          1














          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>








          share|improve this answer


























            1














            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>








            share|improve this answer
























              1












              1








              1






              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>








              share|improve this answer












              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>






              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Nov 15 at 16:46









              Osakr

              56912




              56912























                  1














                  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






                  share|improve this answer


























                    1














                    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






                    share|improve this answer
























                      1












                      1








                      1






                      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






                      share|improve this answer












                      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







                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Nov 15 at 16:48









                      Luis Cabrera Benito

                      550310




                      550310























                          1














                          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>








                          share|improve this answer


























                            1














                            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>








                            share|improve this answer
























                              1












                              1








                              1






                              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>








                              share|improve this answer












                              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>






                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered Nov 15 at 16:51









                              brk

                              25.4k31939




                              25.4k31939























                                  1














                                  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>








                                  share|improve this answer


























                                    1














                                    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>








                                    share|improve this answer
























                                      1












                                      1








                                      1






                                      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>








                                      share|improve this answer












                                      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>






                                      share|improve this answer












                                      share|improve this answer



                                      share|improve this answer










                                      answered Nov 15 at 16:59









                                      Ehsan

                                      9,63431129




                                      9,63431129






























                                          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














                                          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





















































                                          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







                                          Popular posts from this blog

                                          How to change which sound is reproduced for terminal bell?

                                          Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents

                                          Can I use Tabulator js library in my java Spring + Thymeleaf project?