CODEWITHSUNDEEP
javascripthtml
Simon Dean
Simon Dean

Reputation: 237

Capturing variable using event listener

I simply wish to capture the options value at the time of change.

My code works when ran in console as individual lines however even after the function is called the variable listObj and eventValue remain null. 

window.onload = function() {
  document.getElementById("listSelector").addEventListener("change",
    findCarFunc);
  alert("Loaded");
}


function findCarFunc() {

  alert("you changed");

  var listObj = document.getElementById("listSelector");

  var eventValue = listObj.value;

}
<select id="listSelector">
  <option value="defaultManufactuer" selected = "selected">Manufacturer</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Now the function returns a string however, I wanted to add quotation marks to string as I am going to use it to identify the relevant element IDs.

Can I actually do what I am attempting to below? I feel I may have confused myself, 

window.onload = function () {
    document.getElementById("listSelector").addEventListener("change", populateContainer);
    alert("Loaded");
}

function findCarFunc() {
    alert("you changed");
    var listObj = document.getElementById("listSelector").value;
    console.log(listObj);
}

function populateContainer() {
    alert("Container Event Loaded")
    //Div to append child on once the function has returned the 
    //element string. 
    var target = document.getElementById("target");
    //This is where I attempt to capture and manipulate the string by 
    //concatinating the quote marks onto the . 
    var str = "'"+findCarFunc()+"'";
    console.log(str);
}

Upvotes: 0

Views: 356

Answers (2)

Cata John
Cata John

Reputation: 1401

You can get the value of the selected option using
var eventValue = listObj.options[listObj.selectedIndex].value;

Edit. I have updated my answer to fit your needs mentioned in comments. The problem with your code is that your are not returning anything in your findCarFunc(), meaning this function will return undefined by default.

window.onload = function () {
    document.getElementById("listSelector").addEventListener("change", populateContainer);
    alert("Loaded");
}

function findCarFunc() {
    alert("you changed");
    var listObj = document.getElementById("listSelector").value;
  
    return listObj;
}

function populateContainer() {
    alert("Container Event Loaded")
    //Div to append child on once the function has returned the 
    //element string. 
    var target = document.getElementById("target");
    //This is where I attempt to capture and manipulate the string by 
    //concatinating the quote marks onto the . 
    var str = "'"+findCarFunc()+"'";
    console.log(str);
}
<select id = "listSelector">
    <option value="defaultManufactuer" selected = "selected">Manufacturer</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>

Upvotes: 2

Muhammad Ubaid Ullah Farooqi
Muhammad Ubaid Ullah Farooqi

Reputation: 47

window.onload = function () {
    document.getElementById("listSelector").addEventListener("change", findCarFunc);
    alert("Loaded");
}

function findCarFunc() {
    alert("you changed");

    var listObj = document.getElementById("listSelector").value;
    console.log(listObj);
}
<select id = "listSelector">
        <option value="defaultManufactuer" selected = "selected">Manufacturer</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>

Upvotes: 1

Related Questions