Javascript Simple If Else innerHTML == 'something' not working

Question

I have a seemingly simple javascript function I am trying to create that checks the value of an elements innerHTML and spits out a value based on the answer, but for the life of me I can't get it to work and don't get any errors. This function is triggered by onclick events and doesn't need to have window.onload added. Any insight anyone could give me would be much appreciated! Here is my HTML

<div class="col-md-8 col-xs-9 product-info">
  <p id="planTitle" class="bold m-b-2">20 DAY SUPPLY // 40 CAPSULES // FMF</p>
  <p>Price: <span class="pull-right" id="plan-amount">$79</span></p>
  <p>Tax: <span class="pull-right">Included</span></p>
   <p id="shipping-line">Shipping: <span class="pull-right" id="cart-shipping-cost">$9.99</span></p>
    <p class="hidden">Coupon: <span class="pull-right" id="coupon-code">firstmonthfree20day</span></p>
</div>

And my Javascript

function updateShippingCost(country_region) {
    var url;

    var kkdk = '';
    var planTitleesd = document.getElementById('planTitle').innerHTML;
    console.log(planTitleesd);
    if (planTitleesd == '10 Day Supply // 20 Capsules // FMF') {
        kkdk = '5.99';
        console.log(kkdk);
    } else if (planTitleesd == '20 Day Supply // 40 Capsules // FMF') {
        kkdk = '9.99';
        console.log(kkdk);
    } else if (planTitleesd == '30 Day Supply // 60 Capsules // FMF') {
        kkdk = '14.99';
        console.log(kkdk);
    }
}

Oddly, console.log(planTitleesd) returns a value, such as "20 DAY SUPPLY // 40 CAPSULES // FMF" but all the other console.log(kkdk) do not. Thanks for your help!

So, what exactly does that console.log(planTitleesd) return? — Scott Marcus
– Scott Marcus, Commented Dec 5, 2016 at 17:02
Post your markup as well. Have a look at minimal reproducible example. — CollinD
– CollinD, Commented Dec 5, 2016 at 17:02
console.log(planTitleesd) returns a value, but all the others do not this suggests that it doesn't pass any of the ifs — VLAZ
– VLAZ, Commented Dec 5, 2016 at 17:02
It almost definitely doesn't return exactly that. Please provide your markup as an edit to the question so that you have a verifiable example — CollinD
– CollinD, Commented Dec 5, 2016 at 17:06
You are doing a case-sensitive comparison. You've indicated that the resultant value is all caps, while you're comparing it to Title Case. Consider doing a case-insensetive comparison by calling toLowerCase on both operands before comparison. Also, please actually post your markup. Troubleshooting code questions must contain an MCVE. — CollinD
– CollinD, Commented Dec 5, 2016 at 17:11

user3826864 · Accepted Answer · 2016-12-05 17:23:45Z

1

I have updated the original question with the relevant HTML, sorry about that.

You are doing a case-sensitive comparison. You've indicated that the resultant value is all caps, while you're comparing it to Title Case. Consider doing a case-insensetive comparison by calling toLowerCase on both operands before comparison. Also, please actually post your markup. Troubleshooting code questions must contain an MCVE. – CollinD 9 mins ago

This was the simple answer to the simple question I was looking for - Thanks CollinD!

answered Dec 5, 2016 at 17:23

user3826864

4691 gold badge5 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander · Accepted Answer · 2016-12-05 17:23:49Z

0

Almost for sure you have newline at the beginning/end of planTitleesd. Try to replace console.log(planTitleesd); by console.log('>' + planTitleesd + '<'); to check that.

Here is an example: https://jsfiddle.net/324aw9zz/1/

You should avoid any spaces/newline between the tag opener/closer and the text itself:

<th id=planTitle>lala</th>

instead of

<th id=planTitle>
    lala
  </th>

answered Dec 5, 2016 at 17:23

Alexander

7,8844 gold badges56 silver badges67 bronze badges

Comments

Andrew Ice · Accepted Answer · 2016-12-05 17:50:13Z

Why not do something more along the lines of: Using .indexOf() to check for one (or multiple) Strings?

function updateShippingCost(country_region) {
    var url;

    var kkdk = '';
    var planTitleesd = document.getElementById('planTitle').innerHTML;

    if ( planTitleesd.indexOf('10 Day') > -1 && planTitleesd.indexOf('20 Capsules') > -1 ) {
        kkdk = '5.99';
    } else if (planTitleesd.indexOf('20 Day')) {
        kkdk = '9.99';
    } else if (planTitleesd.indexOf('30 Day')) {
        kkdk = '14.99';
    }
}

I also agree that you should remove the case sensitive strings, as, (once again), typos and the like can occur.

Chances are there is just a typo in the value, or perhaps an empty return/newline you may be looking over. Make sure all Carriage Returns and more are removed from the response. Seeing as, some items may actually add one that you do not notice. (Such as an openly tabbed div)

It sounds like this app is a store, something that could get pretty big. I would suggest is maybe an object that returns back the result you need.

The following a JSFiddle that I feel would simplify your process if you could create a proper JSON object. https://jsfiddle.net/0sscf798/

function updateShippingCost(country_region) {
        var url;
        var kkdk = '';
        var planTitleArr = [];
        var planTitleObj = {};
        var planTitleesd = document.getElementById('planTitle').innerHTML;

        // This would most likely be a JSON response of items from the page/category
        planTitleObj = {
            "10 Day Supply": {
              "20 Capsules": {
                "FMF": 1.23
              }
            },
            "20 Day Supply": {
              "20 Capsules": {
                "FMF": 4.56
              }
            }
          };

      planTitleArr = planTitleesd.split(" // ");
      var price = planTitleObj[planTitleArr[0]][planTitleArr[1]][planTitleArr[2]] || "There is a problem with the price."

      alert("The Price is: " + price);
}
updateShippingCost('');

Collectives™ on Stack Overflow

Javascript Simple If Else innerHTML == 'something' not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related