javascript - Event.target.value 返回空字符串或空白

Question

我正在为学校作业创建一个天气仪表板，但我在最后一点上遇到了问题。基本上，用户将搜索特定城市，作为返回，用户将获得有关该城市天气的所有数据和信息。我目前所坚持的是弄清楚如何正确使用 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) 
})

如果我从“event.target”中删除“.value”并搜索“伦敦”市的天气，例如“console.log”

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

我得到一个console.log:

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

如果我的要求不清楚，我可以进一步解释，或者如果需要，我可以上传更多代码。谢谢你的帮助。

Answer 1

通常，您将一个value附加到input、select、textarea元素，基本上是用户输入元素和使用 .value 获取它。

可以使用 value 属性向按钮添加值，但您的案例中缺少该属性。

使用$(event.target).text()获取按钮文本