Question

我正在尝试使用带有锚标记的onclick事件，该标记将更改页面上另一个元素的innerHTML。我不确定我做错了什么，所以我使用的所有代码都在下面。我希望你们能指出我的错误并告诉我这是什么我误解了。 JavaScript文件包含在正文之后，但您可以在JSfiddle here上看到它。因此，当我单击“设置”时，我希望BookmarkList div显示它自己的HTML代码，而Home则是相同的。 BookmarkList div将成为该网站关注的焦点。我只是不确定我为此做错了什么。

HTML：

<body id="bodyBG">
<div class="wrapper">
<div class="box header">
Header
</div>
<div class="box content">
    <div class="box subcontent1">   
        <div class="sdfgsdfgsdfg"><input id="categoryName" placeholder="Category Name"></input></div>
        <div class="sdfgsdfg"><input id="urlLink" placeholder="Site Address"></input></div>
        <div class="sdfgsddfg"><input id="bookmarkName" placeholder="Bookmark Name"></input></div>
        <div><button>Save</button></div>
        <hr>
        <input placeholder="Search Bookmarks"></input>
        <button>Search</button>
    </div>
    <div class="box subcontent2">
        <a href="#" id="settingsNav" onclick="myFunction(this)">Settings</a>
        <hr>
        <a href="#" id="homeNav" onclick="myFunction(this)">Home</a>
        <a href="#">Back</a>
        <a href="#">Forwards</a>
    </div>
    <div id="bookmarkList" class="box subcontent3 bookmark-list">
    </div>
</div>
<div class="box footer">Footer</div>
</div>
<script src="assets/js/bookmark-action-script.js"></script>
</body>

的JavaScript：

var settingsNav = document.getElementById('settingsNav');
var homeNav = document.getElementById('homeNav');

var changeThis = document.getElementById("bookmarkList");

function myFunction(this) {
if (this === settingsNav) {
    changeThis.innerHTML = "<h3>Bookmarks</h3><hr>";
}
else if (this === homeNav) {
    changeThis.innerHTML = "<h3>Bookmarks</h3><hr><p>Store all your bookmarks here!</p><ul><li>An secure storage means for your privacy needs!</li><li>24/7 Availability</li></ul>";
}
else (this != settingsNav | homeNav) {
    changeThis.innerHTML = "Nothing to see here!";
}
};

document.getElementById("settingsNav").addEventListener("click");
document.getElementById("homeNav").addEventListener("click");

解决方案： 我总是添加适合我的问题的解决方案，因此未来的观察者可以看到我遇到了什么问题以及解决方案是什么。我的问题是没有将函数添加到我的eventlistener。如果在JavaScript代码中指定具有附带功能的事件侦听器，则无需在HTML代码中指定onclick事件。但如果没有与事件执行者绑定的功能，则不会发生任何事情。我现在明白了。

var settingsNav = document.getElementById('settingsNav');
var homeNav = document.getElementById('homeNav');
var changeThis = document.getElementById("bookmarkList");

function myFunction(event) {
var el = this;
if (el === settingsNav) {
changeThis.innerHTML = "<h3>Bookmarks</h3><hr>";
} else if (el === homeNav) {
changeThis.innerHTML = "<h3>Bookmarks</h3><hr><p>Store all your bookmarks here!</p><ul><li>A secure storage means for your privacy needs!</li><li>24/7 Availability</li></ul>";
} else if (el != settingsNav || homeNav) {
changeThis.innerHTML = "Nothing to see here!";
}
};

document.getElementById("settingsNav").addEventListener("click", myFunction);
document.getElementById("homeNav").addEventListener("click", myFunction);

Answer 1

从HTML中删除属性事件处理程序。将function (this)更改为function（event）. You did not add an event handler at。addEventListener（）call, where you can pass myFunction`作为函数的引用，以便在调度event时调用。

JavaScript中的OR应该是||而不是|第二else..if

注意，<input>元素是自动关闭的，</input>是无效的HTML。

＆＃13;

<body id="bodyBG">
<div class="wrapper">
<div class="box header">
Header
</div>
<div class="box content">
    <div class="box subcontent1">   
        <div class="sdfgsdfgsdfg"><input id="categoryName" placeholder="Category Name"></div>
        <div class="sdfgsdfg"><input id="urlLink" placeholder="Site Address"></div>
        <div class="sdfgsddfg"><input id="bookmarkName" placeholder="Bookmark Name"></div>
        <div><button>Save</button></div>
        <hr>
        <input placeholder="Search Bookmarks">
        <button>Search</button>
    </div>
    <div class="box subcontent2">
        <a href="#" id="settingsNav">Settings</a>
        <hr>
        <a href="#" id="homeNav">Home</a>
        <a href="#">Back</a>
        <a href="#">Forwards</a>
    </div>
    <div id="bookmarkList" class="box subcontent3 bookmark-list">
    </div>
</div>
<div class="box footer">Footer</div>
</div>
<script>
var settingsNav = document.getElementById('settingsNav');
var homeNav = document.getElementById('homeNav');

var changeThis = document.getElementById("bookmarkList");

function myFunction(event) {
  var el = this;
  if (el === settingsNav) {
    changeThis.innerHTML = "<h3>Bookmarks</h3><hr>";
  } else if (el === homeNav) {
    changeThis.innerHTML = "<h3>Bookmarks</h3><hr><p>Store all your bookmarks here!</p><ul><li>An secure storage means for your privacy needs!</li><li>24/7 Availability</li></ul>";
  } else if (el != settingsNav || homeNav) {
    changeThis.innerHTML = "Nothing to see here!";
  }
};

document.getElementById("settingsNav").addEventListener("click", myFunction);
document.getElementById("homeNav").addEventListener("click", myFunction);
</script>
</body>

＆＃13;

Answer 2

通过修复一些语法错误，您的代码在Chrome中运行良好。

将else更新为else if

else if (clk != settingsNav | homeNav)

将this参数更新为myFunction中的其他内容

function myFunction(clk)

因为您在onclick中调用了myFunction，所以无需添加事件，因此请删除：

document.getElementById("settingsNav").addEventListener("click");
document.getElementById("homeNav").addEventListener("click");

不知怎的，它在jsfiddler中没有用。

你如何在JavaScript中正确编写onclick事件？

2 个答案: