在JavaScript onClick中：为什么笔画出现然后消失？

Question

我正在使用此代码，但是当我单击时，笔划出现并直接消失：

var tag = document.getElementById("tag");
function result()
{
  $(tag.value).css('border','1px solid red');
}

---

<button id="showBtn" onclick='result()'>Show</button>

但是当我将事件类型更改为“ onmouseover”时，笔画保持不变，并且不会消失。

Answer 1

正如jfriend00所说，您太早调用document.getElementById。试试：

function result() {
    $(tag).css("border", "solid 1px red");
}
var tag;
$(function() {
   tag = document.getElementById("tag"); 
});

在Thilo注释后编辑：

var tag;
$(function() {
   tag = document.getElementById("tag"); 
});

function result() {
    $("#" + tag.value).css("border", "solid 1px red");
}

假设您的HTML类似于：

<input id="tag" value="rect"></input>
<button id="showBtn" onclick='result();'>Show</button>
<div id="rect">This is a Div</div>