How to use dynamically created JavaScript object in a conditional statement?

Question

I'm having this little bump in a function, normally if the variable "receivedRDB" is undefined in the DOM, it is dynamically created in a form and if it is defined it takes the value of another variable "receivedR". But "receivedRDB" keeps being created, even when it is already defined in the DOM.

var receivedRDB = document.getElementsByName('receivedR')[0];
    if (typeof receivedRDB !== "undefined") {

        receivedR = JSON.parse(receivedRDB.value.split(",").slice(0));

    } else {

        receivedR = [];


    }
    if (typeof receivedRDB !== "undefined") { //never detected
        receivedR.push(toRemoveR);
        receivedRDB.value = JSON.stringify(receivedR).replace(/"\[\\|\\"]|\\"/g, "");
    } else { //problematic part
        event.preventDefault();
        receivedR.push(toRemoveR);
        var input = document.createElement("input");
        input.type = "hidden";
        input.name = "receivedR";
        input.value = JSON.stringify(receivedR);
        rForm.appendChild(input);
    }

never detected - so, it's always undefined? stands to reason, none of your code actually "defines" it ... you say "receivedRDB" keeps being created ... where? not in that code it doesn't — Jaromanda X
– Jaromanda X, Commented Aug 21, 2017 at 1:33
This might be relevant too I guess : var receivedRDB = document.getElementsByName('receivedR')[0]; — avarus
– avarus, Commented Aug 21, 2017 at 1:36
yeah, where is that line of code in relation to the code in the question? — Jaromanda X
– Jaromanda X, Commented Aug 21, 2017 at 1:37
and if something is dynamic as you state, then you'll need to show a bit more of your code so we can see how you are doing it wrong — Jaromanda X
– Jaromanda X, Commented Aug 21, 2017 at 1:38
yes, and you state something is dynamically created - if that statement is run before the element is created, then receivedRDB wont magically be updated, you'll need to set the value of receivedRDB once the element exists — Jaromanda X
– Jaromanda X, Commented Aug 21, 2017 at 1:39

Jaromanda X · Accepted Answer · 2017-08-21 01:43:50Z

2

Here's a solution based on the fact that getElementsByName is a "live" list

Anywhere in your code you can put

var receivedRDB = document.getElementsByName('receivedR');

then change your code to

if (receivedRDB.length !== 0) {
    receivedR.push(toRemoveR);
    receivedRDB[0].value = JSON.stringify(receivedR).replace(/"\[\\|\\"]|\\"/g, "");
} else {
    event.preventDefault();
    receivedR.push(toRemoveR);
    var input = document.createElement("input");
    input.type = "hidden";
    input.name = "receivedR";
    input.value = JSON.stringify(receivedR);
    rForm.appendChild(input);
}

answered Aug 21, 2017 at 1:43

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

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

Comments

InQβ · Accepted Answer · 2017-08-21 01:58:53Z

0

I guess <script> tag which uses receivedRDB appears earlier than the DOM (in <head> for example). If so, there is more than one way to solve.

<script defer>

add an attribute defer to the <script> tag will make the JavaScript code be run after DOM is loaded
window.onload = function(){ /* ... */ }

window.onload will be called after DOM is loaded.
window.addEventListener('load', function(){ /* ... */ })

More compatible one (more than one function can be called individually)

If not the problem please include the minimal code to reproduce the problem.

answered Aug 21, 2017 at 1:58

InQβ

5214 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to use dynamically created JavaScript object in a conditional statement?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related