Browser short circuit evaluation not working?

Question

I have the following code:

Logic:

var describe = document.getElementById('describe');
var brandpower = document.getElementById('brandpower');

var describeV = describe.options[describe.selectedIndex].value || describe.value;
var brandpowerV = brandpower.options[brandpower.selectedIndex].value || describe.value;

function pollRadio() {
    var handle = window.setInterval(function() {
      if (jQuery('input[name="dealer"]:checked').val() == 'Non-Pro') {
          jQuery('#domain').value = "null";

        jQuery('#website-container').addClass('important-hide')
         //window.clearInterval(handle);
       } else if (jQuery('input[name="dealer"]:checked').val() == 'Pro') {
      jQuery('#website-container').removeClass('important-hide')
      jQuery('#domain').value = "";
      jQuery('#describe').replaceWith('<select id="describe" class="describeClass custom-select" required ><option value="" selected>Tell us about your business.</option><option value="Just getting started">Just getting started</option><option value="Expanding Quickly">Expanding Quickly</option><option value="Need new cutsomers">Need new cutomers</option><option value="I need better products & solutions">I need better products & solutions</option><option value="Other">Other</option></select>');
    window.clearInterval(handle);
       }
    }, 100);
  }
    pollRadio();


      $(document).on('change', "#describe", function() {                                
         if (jQuery('.describeClass').val() == 'Other') {
             jQuery('.describeClass').replaceWith('<input id="describe" class="describeClass form-text" placeholder="Tell us about Other" type="text" style="height:52px; width:100%;" required> ')
            }
    });

    $('#brandpower').on('change', function(){
      if (jQuery('#brandpower').val() == 'Other') {
      jQuery('#brandpower').replaceWith('<input id="brandpower" placeholder="Tell us about Other" type="text" class="form-text" style="height:52px; width:100%;" required> ')
         }
    });

Markup:

<div class="padded-container">
                        <div class="form-container-padded">
                            <select id="describe" class="custom-select describeClass" required >
                                <option value="" selected>Which best describes you?</option>
                                <option value="Household CEO">Household CEO</option>
                                <option value="Geek Dad">Geek Dad</option>
                                <option value="Geek Mom">Geek Mom</option>
                                <option value="Home Automation Thought Leader">Home Automation Thought Leader</option> 
                                <option value="New Home Automation Business Owner">New Home Automation Business Leader</option>
                                <option value="Z-Wave Evangelist">Z-Wave Evangelist</option> 
                                <option value="Integrator">Integrator</option>
                                <option value="IoT Expert">IoT Expert</option>
                                <option value="Enviormentalist">Enviormentalist</option>
                                <option value="Educator">Educator</option>
                                <option value="Computer Science Graduate">Computer Science Graduate</option>
                                <option value="CES Atendee">CES Atendee</option>
                                <option value="Competitor">Competitor</option>
                                <option value="College Student">College Student</option>
                                <option value="Urban Dweller">Urban Dweller</option>
                                <option value="Minimalist">Minimalist</option>
                                <option value="Home Builder">Home Builder</option>
                                <option value="New Home Owner">New Home Owner</option>
                                <option value="Electrician">Electrician</option>
                                <option value="Plumber">Plumber</option>
                                <option value="Other type of Tradesmen/Tradeswoman">Other type of Tradesmen/Tradeswoman</option>
                                <option value="General Contractor">General Contractor</option>
                                <option value="Generalist">Generalist</option>
                                <option value="Summer Home Owner">Owner</option>
                                <option value="Serial Entreprenour">Serial Entreprenour</option>
                                <option value="Tech Savvy">Tech Savvy</option>
                                <option value="Tinkerer">Tinkerer</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="padded-container">
                        <div class="form-container-padded">
                            <select id="brandpower" class="custom-select" required>
                                <option value="" selected>How well do you know dome?</option>
                                <option value="I don't. This is my first time hearing about Dome.'">I don't. This is my first time hearing about Dome.</option>
                                <option value="Have heard of somewhere, but not sure where.">Have heard of somewhere, but not sure where.</option> 
                                <option value="I discovered Dome while researching on the internet.">I discovered Dome while researching on the internet.</option>
                                <option value="I clicked on an ad for Dome I saw online">I clicked on an ad for Dome I saw online</option> 
                                <option value="Someone told about Dome">Someone told about Dome</option>
                                <option value="We met at a tradeshow">We met at a tradeshow</option>
                                <option value="I'm alreaedy interested in working with Dome">I'm alreaedy interested in working with Dome</option>
                                <option value="I have Dome installed in my home">I have Dome installed in my home</option>
                                <option value="I've been to Dome's websites several times">I've been to Dome's websites several times</option>
                                <option value="Other">Other</option> 
                            </select>
                        </div>
                    </div>

So, the idea is, on lines 2 - 4, if one element doesn't exist the interpreter picks up the value of the one that does hence the || operator.

The jQuery that is using the replaceWith method is dynamically changing DOM elements if certian conditions are met. Part of me feels as if this, coupled with getDocumentById is part of the issue because an ID can only exist once. It looks to exist properly though in the console.

However, while I believe this should work in theory, chrome throws an error where at the [element.selectedIndex].value part because it is undefined. How can I overcome this error and have my forms work the way I want them to?

EDIT: Short Circut Evaluation JavaScript OR (||) variable assignment explanation

Answer 1

The interpreter will try to evaluate everything before the ||, so it will blow up if any of the following are true:

• describe is undefined (no element in the DOM with that ID), so you can't access describe.options
• describe.options is undefined, meaning you can't reference the [describe.selectedIndex] property on it
• describe.selectedIndex is undefined, which means that describe.options[describe.selectedIndex] will return undefined, and then you cannot access the value property on it

You'll just need to be more defensive, maybe something like this:

var describeV = (describe && describe.options && describe.selectedIndex) ? describe.options[describe.selectedIndex].value : describe.value;