Question

对不起要问那个傻瓜：D但是我在这里做错了什么？

HTML：

<div onclick="prompt()" value="test">test</div>

的javascript：

function prompt() {

    var error = this.value;
    alert("sdsd");

}

谢谢！

Answer 1

this的值取决于它出现的函数的调用方式。

当浏览器从事件触发器调用onclick函数时，this是输入。

当您致电prompt()时，由于您没有提供任何背景信息且您没有处于严格模式，this是window。

您需要明确传递值。

onclick="prompt.call(this)"

更好的是，首先不要使用内部事件属性。他们混合你的HTML和逻辑，并有一整套陷阱与他们一起去。

然后你有第二个问题。

Div元素没有值。只有输入和其他表单控件。你需要使用.getAttribute("value")而不是.value ...但是这仍然会使你的HTML无效（以及不合适的 - div元素不是为了与之交互而设计的，它们没有给出任何视觉指示它们应该被点击，如果用户不使用鼠标或其他指点设备，他们将无法获得焦点。）

您应该使用旨在与之互动的控件。

最后，prompt是一个内置函数，所以你应该避免覆盖它并选择一个不同的名称。

function show_value(event) {
    var value = this.value;
    document.body.appendChild(document.createTextNode(value));
}

document.querySelector("button").addEventListener("click", show_value);

<button type="button" value="test">test</div>

Answer 2

首先，<div>没有value属性，因此.value无效。其次，你应该不使用内联JavaScript。

你应该做的是：

<div id="test" value="test">test</div>

然后：

$(function(){
    $('#test').click(function(){
        // You need to get the attribute from the element
        var error = $(this).attr('value');
    });
});

如果必须使用内联事件，则需要将元素传递给prompt()函数。问题是它不知道this是什么。这就是你应该绑定事件的原因，如上所示。无论如何，你也可以这样做：

<div onclick="prompt(this)" value="test">test</div>

然后：

function prompt(ele){
    // You can't use `.value` because `<div>`s
    // don't have a value property
    var error = ele.getAttribute('value');
}

P.S。我是否还建议使用data-*属性代替无效属性？

<div id="test" data-value="test">test</div>

然后：

$(function(){
    $('#test').click(function(){
        var error = $(this).data('value');
    });
});

Answer 3

Div没有值属性。

如果你需要获取div元素中的值，你可以通过innerHTML属性来实现。

function prompt() {

    var error = this.innerHTML; // OR this.getAttribute("value");

}

javascript this.value不起作用？

3 个答案: