Question

我正在尝试创建一个网页，以便在点击链接时，它不会转到页面，它会更改div中句子的背景颜色，还会更改句子。到目前为止，它进入了页面，这是假的。

HTML：

<html>
<head>
</head>
<body>
<div id="div1">
Sentence 1
</div>
<div id="div2">
<a href="answer.html" id="c_link" onmousedown="mousedown()">Click to change bgcolor!</a>
</div>
<script type="text/javascript" src="jsdemo.js"></script>
</body>
</html>

JavaScript- jsdemo.js：

function mousedown()
{
document.getElementById('div1').style.backgroundColor="#CCCCCC";
document.div1.innerHTML = "Sentence 2"
}

Answer 1

第二句似乎没有找到div，这样做：

function mousedown() {
    var container = document.getElementById('div1');
    container.style.backgroundColor = "#CCCCCC";
    container.innerHTML = "Sentence 2";
}

并将链接更改为

<div id="div2">
    <a href="javascript:void(0);" id="c_link" onmousedown="mousedown()">Click to change bgcolor!</a>
</div>

我看到了另一个回复，我发现这个答案在两个假设下仍然有效：

您不需要将其他事件处理程序应用于此元素和事件;
您需要与旧浏览器兼容。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Older_way_to_register_event_listeners

Answer 2

摆脱内联事件处理程序，并使用

var div1 = document.getElementById('div1');
document.getElementById('c_link').addEventListener('click', function(e) {
    e.preventDefault(); // Avoid following the link
    div1.style.backgroundColor = "#CCCCCC";
    div1.innerHTML = "Sentence 2";
});

Demo

Answer 3

试试这个，以及为什么您的<a>代码有一个href指向另一个页面？

<a href="javascript: void(0)"/>
<div>Sample text</div>

<script>
  var a = document.getElementsByTagName("a")[0];
  var div = document.getElementsByTagName("div")[0];
  a.onclick = function() {
    div.style.backgroundColor = "#cccccc";
  }

</script>

Answer 4

最好将onmousedown事件更改为onclick事件。

var link = document.getElementById('c_link');

link.onclick = function(e){
    e.preventDefault();
    var div1 = document.getElementById('div1');
    div1.style.backgroundColor = "#CCCCCC";
    div1.innerHTML = "Sentence 2";

}

带链接的div的Bgcolor变化

4 个答案: