CODEWITHSUNDEEP
javascriptjquerydom-events
dag12
dag12

Reputation: 45

Event.target.value returns either empty string or blank

I am creating a weather dashboard for an assignment in school but I am having issues with the last little bit. Basically, the user will search for a specific city and in return will get all data and information regarding the weather for that city. What I am currently stuck on is figuring out how to properly use event.target.value. When the user searches for a city, I append the name of the city to my webpage and convert the name into a button. Once the button is clicked, I want it to return just the name of the city. However, I get what seems to be an empty string or it is not recognizing the value it is targeting? Below is my code : 

let cities = [];

function saveCity() {

    event.preventDefault();

    let city = $('.form-control').val().trim()

    cities.push(city)

    $("#newCity").append('<ul><button class="btn btn-primary">' + city + '</button></ul>');

    localStorage.setItem("cities", JSON.stringify(cities))

}

function appendStorage(){

        cities = JSON.parse(localStorage.getItem('cities'));

        for (let index = 0; index < cities.length; index++) {
            const element = cities[index];

            $("#newCity").append('<ul><button class="btn btn-primary">' + element + 
                                                                          '</button></ul>');

        }

        $(".cities").click(function(event) {
            let cityName = event.target.value
            console.log('clicked')
            console.log(cityName)
        })

}

$(".cities").click(function(event) {
    let cityName = event.target.value
    console.log(cityName) 
})

If i remove '.value' from the 'event.target' and search for the weather in the city of 'London' for example and 'console.log'

    $(".cities").click(function(event) {
        let cityName = event.target
        console.log(cityName) 
    })

I get a console.log of :

<button class="btn btn-primary">London</button>

I can further explain if what I am asking is not clear or I can upload more code if need be. Thanks for any help.

Upvotes: 3

Views: 9960

Answers (3)

Ernst Plesiutschnig
Ernst Plesiutschnig

Reputation: 203

If you do calculations with an input field with your e.target.value, also consider the case that the user input can be deleted or empty.

Therefore, the if-statement is necessary to zero the variable for further proceedings.

let targetValue = e.target.value;
e.target.value = 0 || e.target.value === "" ? (targetValue=0) : (targetValue = e.target.value)

And go on with targetValue.

You may want to consider this post: better react number input

Upvotes: 1

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

Usually, you attach a value to input, select, textarea elements, basically user input elements and fetch it using .value.

It is possible to add value to a button using the value attribute, which is missing in your case.

Use $(event.target).text() for getting button text

Upvotes: 2

S&#248;lve
S&#248;lve

Reputation: 4406

In your example, what you need to do is provide the value you are trying to fetch. Your button does not have a value, therefore .value will return nothing.

I provided some examples below:

// Gets clicked element with class "cities"'s value
$(".cities").click(function(event) {
  let cityName = event.target.value
  console.log('clicked')
  console.log(cityName)
})

// Uses .innerText to get the text present inside the clicked button
$(".get-text").click(function(event) {
  let cityName = event.target.innerText
  console.log('clicked')
  console.log(cityName)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="cities" value="London">London with value</button>
<br>
<button class="cities">London without value</button>
<br>
<button class="get-text">London</button>

Upvotes: 1

Related Questions