JavaScript not reading HTML input value

46 Views Asked by At

On my main website, website.com, I have a functioning JS function that takes an input value from my HTML form - a response to a yes-or-no question. It then processes this input value through a switch statement. I wanted to emulate that functionality on my subdomain for mobile browsers, m.website.com. However, the exact same JS code, reading from the same HTML code, returns an undefined value for my x.

Can anyone see why it will not read the value correctly? Note that I know the function is being triggered correctly, as I get my default alert as soon as I select any value.

HTML:

<div>
     <label for="rsvp">Will you be joining us?<br></label>
     <select id="rsvp" name="rsvp" onchange="didTheySayYes()" required> <!-- Function didTheySayYes() triggers follow-up questions as needed -->
     <option value="null"></option>
     <option value="1">Yes, I/we will be there!</option>
     <option value="0">Sorry, I/we can't make it...</option>
     </select>
</div>

JS:

function didTheySayYes() {
    let x = document.getElementById('rsvp').value;               //Extract answer value
    if (x == 'null') {                                           //Don't respond to empty option
        return
    }
    alert(x);
    switch (Number(x)) {
    case 0:                                                       //Response to 'not joining'
        let name1 = document.createElement('div');
        name1.id = 'rsvp_no';
        name1.className = 'RSVPyesorno';
        document.getElementById('rsvp').insertAdjacentElement('afterend', name1);
        name1.innerHTML = `We're sorry you won't be there!<br><label for="name1">Name:<br></label>
        <input type="text" id="name1" name="name1" required>`;
        break;
    case 1:                                                        //Response to 'will join'
        let some = document.createElement('div');
        some.className = 'RSVPyesorno';
        document.getElementById('rsvp').insertAdjacentElement('afterend', some);
        some.innerHTML =`<br><label for="groupsize">With how many people?<br></label>
                        <select id="groupsize" name="groupsize" onchange="RSVPsize()" required>
                            <option value="null"></option>
                            <option value="gs1">1</option>
                            <option value="gs2">2</option>
                            <option value="gs3">3</option>
                            <option value="gs4">4 or more</option>
                        </select>`;                        
        break;
    default:
        alert("Error! Please refresh the page and try again, and if you keep having issues, contact the organizer.");
        break;
    }
}
1

There are 1 best solutions below

1
Amenawon Esezobor On

If the function didTheySayYes() is working correctly on your main website but not on your subdomain, and assuming the HTML is identical on both, the issue is unlikely to be with the JavaScript code itself. Instead, it could be related to how the code is executed or loaded on the subdomain.