HTTP input to javascript variable remains undefined

Question

Okay, so I'm fairly new to javascript and I'm working on the front-end of a webapplication for my internship, and this just utterly baffles me.

I have a select and an input element, both of which feed into a message model for a database Procedure Call through .POST(). I've done this in other scripts in the project, but here it won't work no matter how I try to assign the values.

Here's the code:

var cctOldSelect = document.getElementById("ConceptToCopy");
var cctOld = cctOldSelect.options[cctOldSelect.selectedIndex].value;
var cctNew = document.getElementById('NewConceptName').value;
console.log("cctOld: " + cctOld + "; cctNew: " + cctNew);
if (cctOld !== "" && cctNew !== "") {
    console.log("model creation started.");
    var model = {
        p_cct_code_old: cctOldSelect.options[cctOldSelect.selectedIndex].value,
        p_cct_code_new: document.getElementById('NewConceptName').value,
        p_specialty_layout: null
    };
    console.log("model creation ended.");
}
console.log("cctOld model: " + model.cctOld + "; cctNew model: " + model.cctNew);

output:

cctOld: 1020H; cctNew: 1021H
model creation started.
model creation ended.
cctOld model: undefined; cctNew model: undefined

I've tried multiple ways:

p_cct_code_Old: $scope.<ElementID>  //both with and without .value
p_cct_code_Old: document.getElementById(<ElementID>)    
var cctOld = document.getElementById(<ElementID>); p_cctOld: cctOld

None of which work. Why won't it assign a value?

You create an object `model` that does not have a property called `cctOld`, then you do `model.cctOld`, which is naturally `undefined`. I'm not sure what you're trying to do. — Karl Reid, Feb 14 '18 at 16:13
Yea. Your object model doesn't have a field called `cctOld` or `cctNew`. — Tim Han, Feb 14 '18 at 16:19
To clarify @Karl All the console.log stuff was to try and figure out why the DB proc returned an error saying cct code old was required. So I figured the model variable didn't set correctly, as the cct codes in my select are retrieved from the db. But apparently I was pretty tired, to make such a basic mistake as putting in the wrong property name in the console.log. No wonder I couldn't find out why my model wasn't getting filled, because it was. Now to figure out why the db won't accept it. back to the drawing board. — TJanssen, Feb 15 '18 at 09:08

score 0 · Accepted Answer · answered Feb 14 '18 at 16:28

The problem in this case is that you create a new object called "model" and with two attributes called "p_cct_code_old" and "p_cct_code_new", then you are trying to access two attributes called "cctOld" and "cctNew" out of scope.

The JS interpreter when you are trying to access a non existing attributes do not throw an error, instead he return an undefined value.

The thing that I suggest to make the things work is:

var model = {};
var cctOldSelect = document.getElementById("ConceptToCopy");
var cctOld = cctOldSelect.options[cctOldSelect.selectedIndex].value;
var cctNew = document.getElementById('NewConceptName').value;
console.log("cctOld: " + cctOld + "; cctNew: " + cctNew);
if (cctOld !== "" && cctNew !== "") {
    console.log("model creation started.");
    model.p_cct_code_old = cctOldSelect.options[cctOldSelect.selectedIndex].value;
    model.p_cct_code_new = document.getElementById('NewConceptName').value;
    model.p_specialty_layout: null;
    console.log("model creation ended.");
}
console.log("cctOld model: " + model.p_cct_code_old + "; cctNew model: " + model.p_cct_code_new);

Tell me if this solution helped you !

"The JS interpreter when you are trying to access a non existing attributes do not throw an error, instead he return an undefined value." Is useful for me to remember. It'll save me from a wild goose chase or two in the future. I suppose being used to c# has me depending on the IDE too much. Thank you. — TJanssen, Feb 15 '18 at 09:23

HTTP input to javascript variable remains undefined

1 Answers1