javascript this.value 不起作用?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34518960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 16:28:32  来源:igfitidea点击:

javascript this.value doesn't work?

javascript

提问by user5728446

sorry for asking that stupid:D However what did i do wrong here?

抱歉问那个愚蠢的人:D 但是我在这里做错了什么?

html:

html:

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

javascript:

javascript:

function prompt() {

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

}

Thanks!

谢谢!

回答by Rocket Hazmat

First off, <div>s don't have a valueattribute, so .valuewon't work. Second, you should notuse inline JavaScript.

首先,<div>s 没有value属性,所以.value不起作用。其次,你应该使用内联的JavaScript。

What you should do is:

你应该做的是:

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

Then:

然后:

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

If you mustuse inline events, then you need to passthe element to the prompt()function. The problem is that it doesn't know what thisis. This is why you should bind the event as shown above. Anyway, you can also do:

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

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

Then:

然后:

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

P.S. May I also suggest using data-*attributes for this instead of invalidattributes?

PS 我还可以建议data-*为此使用属性而不是无效属性吗?

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

Then:

然后:

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

回答by Quentin

The value of thisdepends on how the function that it appears in was called.

的值this取决于它出现的函数是如何被调用的。

When the browser calls the onclick function from the event trigger, thisis the input.

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

When you call prompt(), because you provided no context and you are no in strict mode, thisis the window.

当您调用 时prompt(),因为您没有提供上下文并且您不在严格模式下,this所以window.

You need to explicitly pass the value.

您需要显式传递该值。

onclick="prompt.call(this)"

Better yet, don't use intrinsic event attributes in the first place. They mix your HTML and logic and have a whole collection of gotchas to go with them.

更好的是,首先不要使用内部事件属性。他们将您的 HTML 和逻辑混合在一起,并有一系列的陷阱可供使用。

Then you have a second problem.

然后你有第二个问题。

Div elements don't have values. Only inputs and other form controls do. You would need to use .getAttribute("value")instead of .value… but that still leaves your HTML invalid (as well as inappropriate - div elements aren't designed to be interacted with, they give no visual indication that they should be clicked on, and they won't receive the focus should the user not be using a mouse or other pointing device anyway).

Div 元素没有值。只有输入和其他表单控件可以。您将需要使用.getAttribute("value")而不是.value……但这仍然会使您的 HTML 无效(以及不合适的 - div 元素并非旨在与之交互,它们没有给出应该单击它们的视觉指示,并且它们不会收到焦点应该是用户不使用鼠标或其他指点设备)。

You should use a control designed to be interacted with.

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

Finally, promptis a built in function, so you should avoid overwriting it and pick a different name instead.

最后,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>

回答by Arsalan

Div does not have value attribute.

Div 没有 value 属性。

If you need to get the value inside div element you can do it by innerHTML property.

如果您需要获取 div 元素内的值,您可以通过 innerHTML 属性来完成。

function prompt() {

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

}