Event.target.value возвращает либо пустую строку, либо пустую - PullRequest
Новая
       13

Event.target.value возвращает либо пустую строку, либо пустую

1 голос
/ 31 марта 2020

Я создаю информационную панель погоды для задания в школе, но у меня возникли проблемы с последним чуть-чуть. По сути, пользователь будет искать определенный c город, а взамен получит все данные и информацию о погоде для этого города. На данный момент я застрял в том, чтобы понять, как правильно использовать event.target.value. Когда пользователь ищет город, я добавляю название города на свою веб-страницу и преобразую его в кнопку. Как только кнопка нажата, я хочу, чтобы она возвращала только название города. Тем не менее, я получаю пустую строку или она не распознает целевое значение? Ниже приведен мой код: 

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) 
})

Если я уберу «.value» из «event.target» и найду погоду в городе «Лондон», например, и «console.log» 

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

Я получаю console.log: 

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

Я могу дополнительно объяснить, если то, что я спрашиваю, неясно, или я могу загрузить больше кода, если это будет необходимо. Спасибо за любую помощь.

Ответы [ 2 ]

1 голос
/ 31 марта 2020

В вашем примере вам нужно указать значение, которое вы пытаетесь получить. У вашей кнопки нет значения, поэтому .value ничего не вернет.

Я привел несколько примеров ниже: 

// 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>
1 голос
/ 31 марта 2020

Обычно вы присоединяете value к input, select, textarea элементам, в основном элементам пользовательского ввода, и извлекаете их, используя .value.

Можно добавить значение к кнопке, используя атрибут value, который отсутствует в вашем случае.

Используйте $(event.target).text() для получения текста кнопки

...