Javascript: Issue with hiding a section

Question

Background

If users have the item called Get All X in their cart, then I want to hide the upsell section called wcf-bump-order-content.

What I have tried

window.addEventListener("load", function () {
  var you1 = document.getElementsByClassName("product-name");
  var you5 = "";

  for (var i = 0; i < you1.length; i++) {
    var you2 = you1[i].textContent;
    var you3 = you2.replace(/\s/g, "");
    var you4 = you3.replace("Xs", "");
    you5 += you4;
  }
  var you6 = you5.includes("GetAllX");
  if (you6 = "true") {
    document.getElementsByClassName("wcf-bump-order-content")[0]
            .setAttribute("style", "display:none !important");
  }
  console.log(you6);
  console.log("finish");
});

Full code + HTML: https://jsfiddle.net/lindychen/14vLfcy5/

Results

As you can see from the JS fiddle, my code works and hides the relevant section. However, when I test this on my live website, it doesn't work (ie. the upsell section still shows). I can't figure out what's wrong especially since console log shows you6 to be true and finish is also shown.

Thanks.

Is your page loading dynamically? In that case you will have to user it diffrently. — Jimmy, Jul 26 '20 at 05:52
Did you try logging `document.getElementsByClassName("wcf-bump-order-content")[0]` to make sure it exists? — Robert Cooper, Jul 26 '20 at 05:58
@Jimmy. Thanks. I am not sure if it is loading dynamically (I am using a Wordpress Plugin). Can you let me know the approach I should be taking if it is loading dynamically? I thought by having it such that the window is fully loaded prior to my code executing, this would mitigate dynamically loaded content. The class names do not change. Thanks. — xojijog684, Jul 26 '20 at 06:32
@RobertCooper Thanks Robbert. Yes, I have done that and it exists. This is an example of what happens when I console log it (https://i.imgur.com/iVVe1T6.png). However, what is very strange is that on the HTML side, there appears to be no change at all (https://i.imgur.com/EvlGfaY.png)?? In other words, the `display:none !important` isn't added as an attribute. Thanks. — xojijog684, Jul 26 '20 at 06:34
Hmm, it could be that the plugin is re-rendering the markup without the styles you've added manually (as would be the case with React). — Robert Cooper, Jul 26 '20 at 06:37
@RobertCooper thanks. In this instance, is there a Javascript way around this then? Thank you. — xojijog684, Jul 26 '20 at 06:39
@xojijog684: You should use event delegation approach like this: https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript — Jimmy, Jul 26 '20 at 06:55

EvanMorrison · Answer 1 · 2020-07-27T02:49:28.850

0

There are a couple of issues. First, you have a mistake in the conditional if (you6 = "true") should be if (you6 === true) or just if(you6). The single equals vs. == or === and the string "true" vs the boolean value true.

The second problem I found after fixing the conditional in the jsfiddle and it stopped working. The problem was using <td> tags without the requisite <table><tbody><tr> around it was causing the query not to return a valid element list.

After fixing that, the jsfiddle was working again. https://jsfiddle.net/evrmorr/k481pyjm/14/

edited Jul 27 '20 at 02:49

answered Jul 27 '20 at 02:20

EvanMorrison

1,212
8
13

Thanks @EvanMorrison, I tried it and while it works on the fiddle, it does not work on my site. I think the issue is that the stuff is dynamically generated content and I need to figure out how to do this through event delegation. Thanks. – xojijog684 Jul 27 '20 at 16:19

score 0 · Answer 2 · answered Jul 27 '20 at 02:37

0

Instead of

if (you6 = "true") {
...
}

use

if (you6) {  //or if(you6 == true) or if(you6 =="true") or if (you6 === true)
...
}

because you6 = "true" is an assignment, not a comparison and it will always be considered true unless you assign null or empty string to you6.

For example:

if(x="")
{ console.log('a')} 
else 
{console.log('b')}

//will display b

however

if(x="anything other than empty string will be considered true")
{ console.log('a')} 
else 
{console.log('b')}

//will display a

answered Jul 27 '20 at 02:37

Shadi Alnamrouti

11,796
4
56
54

Thanks @ShadiNamrouti, even after fixing for this it doesn't work. Think the issue is that it is dynamically generated content and I need to figure out how to do this through event delegation. Thanks. – xojijog684 Jul 27 '20 at 16:20

Javascript: Issue with hiding a section

2 Answers2

Linked