多个下拉菜单可动态更改文本表单字段

Question

With the help of some fine people here at Stack Overflow, I was able to come up with some script that allowed me to dynamically change some text form fields based on the user's selection from a drop-down menu. Now I would like to implement two drop-down menus affecting different text form fields. I can have them each working on their own, but when I go to combine them, only one works.

input_1 and input_39 are my drop-down menus.

There might be times when one or the other is not present on the page.

You can view it on this page: http://www.ortorderdesk.com/product/2-sided-bc/

var element = document.querySelector('form.cart');

function updateText() {
    var obj_sel_value = element.input_1.value;
    if (element.input_19)
        element.input_19.value = myData1[obj_sel_value];
    if (element.input_21)
        element.input_21.value = myData2[obj_sel_value];
    if (element.input_26)
        element.input_26.value = myData3[obj_sel_value];
    if (element.input_31)
        element.input_31.value = myData4[obj_sel_value];
}

var element = document.querySelector('form.cart');
element.input_39.onchange = updateText;

function updateText() {
    var obj_sel_value = element.input_39.value;

    if (element.input_33)
        element.input_33.value = myData5[obj_sel_value];
    if (element.input_40)
        element.input_40.value = myData6[obj_sel_value];
}

Answer 1

You're overwriting the first instance by re-creating the same variable. Try simply removing the second instance of var element = document.querySelector('form.cart'); .