CODEWITHSUNDEEP
javascripthtmlcss
Neethi Kolikapudi
Neethi Kolikapudi

Reputation: 3

Values are not coming in dropdown

Html:

 <body>
<label>
    Year:
</label>

<select id="selectMe">
    <option>

    </option>
</select>
</br>
<label>
    Make:
</label>
<select>
    <option>

    </option>
</select>
</br>
<label>
    Model:
</label>
<select>
    <option>

    </option>
</select>
</br>
<script src="script.js" type="text/javascript"></script>

Javascript:

 function printIteration(){
var vehicleData = [{year: 2015, make: "Audi", model: "A4"},
    {year: 2014, make: "Benz", model: "c2000"},
    {year: 2015, make: "Maruti", model: "s-cross"},
    {year: 2015, make: "Maruti", model: "WagonR"}
];
for(var i = 0; i<vehicleData.length; i++){
    //console.log(vehicleData[i]);
    for( var i= 0; i<vehicleData.length; i++){
        //console.log(vehicleData[i].year);
        document.write(vehicleData[i].year + "</br>")
    }
}
}

 printIteration();

function buildDropdownYear(){
var yearSelect = document.getElementById("selectMe");
var drop1 = document.createElement("option");
yearSelect.appendChild(carYear);
var carYear = buildCtrl("data1","option");
}
buildDropdownYear();

function buildCtrl(data,ctrl){
var item = document.createElement(ctrl);
if(data){
    item.innerHTML = data;
}
return item;
}

I am new to javascript.I just started learning it I am kind of stuck in here because I am not getting what the error is. Console is showing this error:

TypeError: Argument 1 of Node.appendChild is not an object.
yearSelect.appendChild(carYear);

My plunker is: http://plnkr.co/edit/fMufqCctzHe4Umbpu6Ag?p=preview

Can anyone please tell me what I am doing wrong?

Upvotes: 0

Views: 96

Answers (2)

Thomas Sebastian
Thomas Sebastian

Reputation: 1612

There are too many issues in your code.

  • Why do you want to create the option tag when it is already there in the HTML? Add it either in HTML or in js, not both.

  • Also like others pointed out, you are trying to access a variable before even it is defined.

  • One more problem I noticed is, you are not passing the data, that needs to be appended, but just a string data1 as an argument to your function. You should pass the vehicleData array in your case.

  • As a recommended alternative to document.write you could use DOM manipulation to directly query and add node elements to the DOM.

    Try to understand what you are trying to do. Take it one step at a time. Break your problems. You will get there. I have forked your Plunk and modified it so that the year value gets added to the dropdown. You can follow the same for other dropdown items.

    Here is the Plunker.

Also consider the suggestions given in the comment section 

 var vehicleData = [{year: 2015, make: "Audi", model: "A4"},
        {year: 2014, make: "Benz", model: "c2000"},
        {year: 2015, make: "Maruti", model: "s-cross"},
        {year: 2015, make: "Maruti", model: "WagonR"}
    ];


for(var i = 0; i<vehicleData.length; i++){
    buildDropdownYear(i);
}

function buildDropdownYear(k) {
    var yearSelect = document.getElementById("selectMe");
    var drop1 = document.createElement("option");

    var carYear = buildCtrl(k, vehicleData,"option");
    yearSelect.appendChild(carYear);
}

function buildCtrl(k, data,ctrl){
    var item = document.createElement(ctrl);
    if(data){
        item.innerHTML = data[k].year;
    }
    return item;
}

I wouldn't do it this way, If I were to begin with a fresh code. There is a lot of scope for improvements here.

Upvotes: 1

Yasitha
Yasitha

Reputation: 2303

In yearSelect.appendChild(carYear); carYear is not being initialized.

var carYear = buildCtrl("data1","option"); should come before the above line.

Plunker

Upvotes: 0

Related Questions