I'm creating a website for sociology info. It's similar to yourlogicalfallacyis.com so when you hover over the icons, the name and description of each icon is displayed. Each icon has a different description. However, I can't seem to find a way to display the correct information for each icon.
The lorem ipsum text is just a placeholder for the description of each icon. Here is my code. Is there a way I can show the description of each image when I hover over them?
// Labeling each variable
const conceptNameDisplay = document.getElementById('conceptNameDisplay');
const conceptInfoDisplay = document.getElementById('conceptInfoDisplay');
// Labeling each description
const socioDefinition = document.getElementById('socioDefinition');
const socioTheories = document.getElementById('socioTheories');
const interactionist = document.getElementById('interactionist');
const conflict = document.getElementById('conflict');
const functionalist = document.getElementById('functionalist');
const formsSocialization = document.getElementById('formsSocialization');
const exchange = document.getElementById('exchange');
const learning = document.getElementById('learning');
const labeling = document.getElementById('labeling');
const feminism = document.getElementById('feminism');
const strain = document.getElementById('strain');
const game = document.getElementById('game');
const sociobiology = document.getElementById('sociobiology');
const chaos = document.getElementById('chaos');
const phenomonology = document.getElementById('phenomonology');
const disengagement = document.getElementById('disengagement');
const macro = document.getElementById('macro');
const comte = document.getElementById('comte');
const marx = document.getElementById('marx');
const durkheim = document.getElementById('durkheim');
const weber = document.getElementById('weber');
const spencer = document.getElementById('spencer');
// Selecting all images
const icons = document.querySelectorAll('img');
// function for when images are clicked, applicable to all images
icons.forEach(icon => icon.addEventListener("mouseover", (e) => {
conceptName = e.target.alt
conceptNameDisplay.innerHTML = conceptName
displayInfo()
}))
// function to display respective information for each icon
function displayInfo() {
if (document.getElementById('whatIsSociologyIcon').onmouseover == true) {
conceptInfoDisplay.innerHTML = 'Sociology is the study of human social relationships and institutions. Sociology’s subject matter is diverse, ranging from crime to religion, from the family to the state, from the divisions of race and social class to the shared beliefs of a common culture, and from social stability to radical change in whole societies.';
} else if (document.getElementById('socioTheoriesIcon').onmouseover == true) {
conceptInfoDisplay.innerHTML = 'A sociological theory is a supposition that intends to consider, analyze, and/or explain objects of social reality from a sociological perspective, drawing connections between individual concepts in order to organize and substantiate sociological knowledge.';
} else if (document.getElementById('interactionistIcon').onmouseover == true) {
conceptInfoDisplay.innerHTML = 'Interactionist Perspective Information';
}
}@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,900&display=swap');
:root {
--mainbgcolor: #FDFBEC;
--logo: #F4C553;
--green: #E1EEDD;
--greentext: #153A1E;
--orange: #EE9F4A;
}
html, body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Merriweather', serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a, li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
@media only screen
and (min-width: 1024px)
and (max-height: 1366px)
and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1190px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
@media (min-width:1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pop Sociology</title>
</head>
<body>
<header>
<div >
<h1 id="logo">Pop Sociology!</h1>
</div>
<div >
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</header>
<main>
<div >
<div >
<img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon">
</div>
<div >
<img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon">
</div>
<div >
<img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon">
</div>
<div >
<img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon">
</div>
<div >
<img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon">
</div>
<div >
<img src="socialization2.PNG" alt="Socialization" id="socialization">
</div>
<div >
<img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon">
</div>
<div >
<img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon">
</div>
<div >
<img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon">
</div>
<div >
<img src="labeling2.PNG" alt="Labeling Theory" id="labelingIcon">
</div>
<div >
<img src="feminism2.png" alt="Feminist Theory" id="feminismIcon">
</div>
<div >
<img src="critical2.PNG" alt="Critical Theory" id="criticalIcon">
</div>
<div >
<img src="strain2.png" alt="Social Strain Theory" id="strainIcon">
</div>
<div >
<img src="rational2.png" alt="Rational Theory" id="rationalIcon">
</div>
<div >
<img src="game2.PNG" alt="Game Theory" id="gameIcon">
</div>
<div >
<img src="sociobiology2.PNG" alt="Sociobiology" id="sociobiologyIcon">
</div>
<div >
<img src="chaos2.png" alt="Chaos Theory" id="chaosIcon">
</div>
<div >
<img src="gears2.PNG" alt="Social Phenomenology" id="phenomonologyIcon">
</div>
<div >
<img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon">
</div>
<div >
<img src="macro2.PNG" alt="Macro Theory" id="macroIcon">
</div>
<div >
<img src="comte2.PNG" alt="August Comte" id="comteIcon">
</div>
<div >
<img src="marx2.PNG" alt="Karl Marx" id="marxIcon">
</div>
<div >
<img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon">
</div>
<div >
<img src="weber2.PNG" alt="Max Weber" id="weberIcon">
</div>
<div >
<img src="spencer2.PNG" alt="Herbert Spencer" id="spencerIcon">
</div>
</div>
<div >
<h3 id="conceptName"><span id="conceptNameDisplay">Name of Concept</h3></span>
<p><span id="conceptInfoDisplay">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio voluptatibus saepe sequi dolores quod ab enim excepturi non unde dolorem!</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>
<script src="script.js"></script>
</body>
</html>CodePudding user response：
This will work as you intended.
And I use event delegation, which is more effective than putting eventListner to all icons.
const iconContainer = document.querySelector(".icon-container");
const icons = document.querySelectorAll(".icon > img");
// function for when images are clicked, applicable to all images
iconContainer.addEventListener("mouseover", (e) => {
const img = e.target.closest(".icon > img");
if (!img) return;
conceptNameDisplay.innerHTML = img.alt;
displayInfo(img.id);
});
// function to display respective information for each icon
function displayInfo(id) {
const selectedIcon = [...icons].find((icon) => icon.id === id);
if (id === "whatIsSociologyIcon") {
conceptInfoDisplay.innerHTML =
"Sociology is the study of human social relationships and institutions. Sociology’s subject matter is diverse, ranging from crime to religion, from the family to the state, from the divisions of race and social class to the shared beliefs of a common culture, and from social stability to radical change in whole societies.";
} else if (id === "socioTheoriesIcon") {
conceptInfoDisplay.innerHTML =
"A sociological theory is a supposition that intends to consider, analyze, and/or explain objects of social reality from a sociological perspective, drawing connections between individual concepts in order to organize and substantiate sociological knowledge.";
} else if (id === "interactionistIcon") {
conceptInfoDisplay.innerHTML = "Interactionist Perspective Information";
}
}
See code snippet.
// Labeling each variable
const conceptNameDisplay = document.getElementById("conceptNameDisplay");
const conceptInfoDisplay = document.getElementById("conceptInfoDisplay");
// Labeling each description
const socioDefinition = document.getElementById("socioDefinition");
const socioTheories = document.getElementById("socioTheories");
const interactionist = document.getElementById("interactionist");
const conflict = document.getElementById("conflict");
const functionalist = document.getElementById("functionalist");
const formsSocialization = document.getElementById("formsSocialization");
const exchange = document.getElementById("exchange");
const learning = document.getElementById("learning");
const labeling = document.getElementById("labeling");
const feminism = document.getElementById("feminism");
const strain = document.getElementById("strain");
const game = document.getElementById("game");
const sociobiology = document.getElementById("sociobiology");
const chaos = document.getElementById("chaos");
const phenomonology = document.getElementById("phenomonology");
const disengagement = document.getElementById("disengagement");
const macro = document.getElementById("macro");
const comte = document.getElementById("comte");
const marx = document.getElementById("marx");
const durkheim = document.getElementById("durkheim");
const weber = document.getElementById("weber");
const spencer = document.getElementById("spencer");
const iconContainer = document.querySelector(".icon-container");
const icons = document.querySelectorAll(".icon > img");
// function for when images are clicked, applicable to all images
iconContainer.addEventListener("mouseover", (e) => {
const img = e.target.closest(".icon > img");
if (!img) return;
conceptNameDisplay.innerHTML = img.alt;
displayInfo(img.id);
});
// function to display respective information for each icon
function displayInfo(id) {
const selectedIcon = [...icons].find((icon) => icon.id === id);
if (id === "whatIsSociologyIcon") {
conceptInfoDisplay.innerHTML =
"Sociology is the study of human social relationships and institutions. Sociology’s subject matter is diverse, ranging from crime to religion, from the family to the state, from the divisions of race and social class to the shared beliefs of a common culture, and from social stability to radical change in whole societies.";
} else if (id === "socioTheoriesIcon") {
conceptInfoDisplay.innerHTML =
"A sociological theory is a supposition that intends to consider, analyze, and/or explain objects of social reality from a sociological perspective, drawing connections between individual concepts in order to organize and substantiate sociological knowledge.";
} else if (id === "interactionistIcon") {
conceptInfoDisplay.innerHTML = "Interactionist Perspective Information";
}
}@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,900&display=swap");
:root {
--mainbgcolor: #fdfbec;
--logo: #f4c553;
--green: #e1eedd;
--greentext: #153a1e;
--orange: #ee9f4a;
}
html,
body {
margin: 0 auto;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
font-family: "Merriweather", serif;
background-color: var(--mainbgcolor);
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--mainbgcolor);
color: var(--logo);
padding: 0px 20px;
font-size: small;
}
#logo {
font-weight: 900;
}
header a,
li {
text-decoration: none;
list-style: none;
color: var(--orange);
font-weight: 700;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 16px;
}
main {
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
}
.icon-container {
padding: 10px 20px;
display: grid;
gap: 15px;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
}
.info-icons-container {
padding: 5px 20px;
text-align: center;
}
#conceptName {
font-weight: 700;
font-size: 2rem;
margin: 5px 0px 10px 0px;
}
.conceptInfo {
font-size: 0.8rem;
}
footer {
background-color: var(--orange);
color: var(--mainbgcolor);
text-align: center;
margin-top: auto;
}
.icon img {
width: 55px;
height: auto;
cursor: pointer;
}
.icon img:hover {
box-shadow: 0 0 5px 5px var(--orange);
}
@media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 80px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1190px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 30px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
}
@media (min-width: 1200px) {
header {
font-size: medium;
padding: 0 30px;
}
.icon-container {
gap: 50px;
}
.info-icons-container {
margin-bottom: 20px;
}
.icon img {
width: 100px;
height: auto;
}
#conceptName {
font-size: 3rem;
}
#conceptInfo {
font-size: 1rem;
margin: 0 30px;
}
footer {
width: 100%;
}
}<header>
<div >
<h1 id="logo">Pop Sociology!</h1>
</div>
<div >
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</header>
<main>
<div >
<div >
<img src="whatissocio2.png" alt="What is Sociology?" id="whatIsSociologyIcon">
</div>
<div >
<img src="sociotheory2.png" alt="Sociological Theories" id="socioTheoriesIcon">
</div>
<div >
<img src="interactionist2.png" alt="Interactionist Perspective" id="interactionistIcon">
</div>
<div >
<img src="conflict2.png" alt="Conflict Perspective" id="conflictIcon">
</div>
<div >
<img src="functionalist2.png" alt="Functionalist Perspective" id="functionalistIcon">
</div>
<div >
<img src="socialization2.PNG" alt="Socialization" id="socialization">
</div>
<div >
<img src="formssocializatin2.png" alt="Forms of Socialization" id="formsSocializationIcon">
</div>
<div >
<img src="exchange2.png" alt="Social Exchange Theory" id="exchangeIcon">
</div>
<div >
<img src="sociallearning2.png" alt="Social Learning Theory" id="learningIcon">
</div>
<div >
<img src="labeling2.PNG" alt="Labeling Theory" id="labelingIcon">
</div>
<div >
<img src="feminism2.png" alt="Feminist Theory" id="feminismIcon">
</div>
<div >
<img src="critical2.PNG" alt="Critical Theory" id="criticalIcon">
</div>
<div >
<img src="strain2.png" alt="Social Strain Theory" id="strainIcon">
</div>
<div >
<img src="rational2.png" alt="Rational Theory" id="rationalIcon">
</div>
<div >
<img src="game2.PNG" alt="Game Theory" id="gameIcon">
</div>
<div >
<img src="sociobiology2.PNG" alt="Sociobiology" id="sociobiologyIcon">
</div>
<div >
<img src="chaos2.png" alt="Chaos Theory" id="chaosIcon">
</div>
<div >
<img src="gears2.PNG" alt="Social Phenomenology" id="phenomonologyIcon">
</div>
<div >
<img src="disengagement2.png" alt="Disengagement Theory" id="disengagementIcon">
</div>
<div >
<img src="macro2.PNG" alt="Macro Theory" id="macroIcon">
</div>
<div >
<img src="comte2.PNG" alt="August Comte" id="comteIcon">
</div>
<div >
<img src="marx2.PNG" alt="Karl Marx" id="marxIcon">
</div>
<div >
<img src="durkheim2.png" alt="Emile Durkheim" id="durkheimIcon">
</div>
<div >
<img src="weber2.PNG" alt="Max Weber" id="weberIcon">
</div>
<div >
<img src="spencer2.PNG" alt="Herbert Spencer" id="spencerIcon">
</div>
</div>
<div >
<h3 id="conceptName"><span id="conceptNameDisplay">Name of Concept</h3></span>
<p><span id="conceptInfoDisplay">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio voluptatibus saepe sequi dolores quod ab enim excepturi non unde dolorem!</span></p></span>
</div>
</main>
<footer>
<p>Created by Me</p>
</footer>CodePudding user response：
One thing you can do is to keep all your descriptions in an array in javascript. Then use for loop instead of forEach loop on icons array. Then map each element of icon with the appropriate element of description array yourself, like here shown in the code below.
// Labeling each variable
const conceptNameDisplay = document.getElementById('conceptNameDisplay');
const conceptInfoDisplay = document.getElementById('conceptInfoDisplay');
// Selecting all images
const icons = document.querySelectorAll('img');
// Description array
const descriptions = ['Sociology is the study of human social relationships and institutions. Sociology’s subject matter is diverse, ranging from crime to religion, from the family to the state, from the divisions of race and social class to the shared beliefs of a common culture, and from social stability to radical change in whole societies.','A sociological theory is a supposition that intends to consider, analyze, and/or explain objects of social reality from a sociological perspective, drawing connections between individual concepts in order to organize and substantiate sociological knowledge.','Interactionist Perspective Information', 'des4', 'des5', 'des6', 'des7', 'des8', 'des9', 'des10', 'des11', 'des12', 'des13', 'des14', 'des15', 'des16', 'des17', 'des18', 'des19', 'des20', 'des21', 'des22', 'des23', 'des24', 'des25'];
// function for when images are clicked, applicable to all images
for (let i = 0, n=icons.length; i < n; i ) {
icons[i].addEventListener("mouseover", (e) => {
conceptName = e.target.alt
conceptNameDisplay.innerHTML = conceptName;
conceptInfoDisplay.innerHTML = descriptions[i];
});
}