ページ上の別の要素のinnerHTMLを変更するアンカータグを使用してonclickイベントを使用しようとしています。何が間違っているのかわからないので、使用しているすべてのコードを以下に示します。皆さんが私の間違いを指摘して、私が誤解したことを教えてくれることを願っています。JavaScriptファイルは本文の後に含まれていますが、JSfiddleのここで確認できます。したがって、[設定]をクリックすると、BookmarkList divに独自のHTMLコードが表示され、Homeでも同じように表示されます。このサイトでは、BookmarkListdivが注目を集めます。私はこれに対して何が間違っているのかよくわかりません。
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");
解決策：私は常に自分の問題に適した解決策を追加します。これにより、将来のオブザーバーは、自分が抱えていた問題と解決策を確認できます。私の問題は、イベントリスナーに関数を追加することではありませんでした。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);
HTMLから属性イベントハンドラーを削除します。イベントがディスパッチされたときに呼び出す関数への参照として、function (this)function（event）. You did not add an event handler at.addEventListener（）call, where you can passmyFunction`に変更します。
またはJavaScript||では|2番目ではなくelse..if
<input>要素は自己閉鎖的で</input>あり、無効な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"></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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加