I have div container, that holds 4 more divs and each of these divs have a header, image and a paragraph tag. What I am making is a game, where when I click on one of the divs, images, the remaining 3 images that were not clicked move to the move to another div section with a class of "enemies". How would I do this without having a bunch of onclick functions for each character?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 4 Game</title>
<link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Added link to the jQuery Library -->
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src = "assets/javascript/game.js"> </script>
</head>
<body>
<div class = "characters">
<div class="charContainer">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer1">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer2">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer3">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
</body>
</html>
jQuery
$(document).ready(function(){
$('#c1').text("Darth Vader");
$('#c2').text("Luke Skywalker");
$('#c3').text("Obi Won");
$('#c4').text("Darth Maul");
var health = $('#c1hp').data('hp');
$('#c1hp').html(health);
var health = $('#c2hp').data('hp');
$('#c2hp').html(health);
var health = $('#c3hp').data('hp');
$('#c3hp').html(health);
var health = $('#c4hp').data('hp');
$('#c4hp').html(health);
$('.charContainer').on('click', function(){
var yourCharacter = $(this);
$('#your').append(yourCharacter);
});
});
I am trying to move anyone of the <div>s .charContainer, .charContainer1, .charContainer2, .charContainer3 including the header, <img> and <p> tag inside of it to the <div> with id #your.
Update: I found a solution by doing a .each function for the charContainer. Instead of having 4 different charContainers, I just all named them the same class and in the .each function, for each of these classes that did not get appended to the chosen character box, i added a class called .foes, so that I can now differentiate between divs that have been "selected" and those that have not.
I believe your error was that you have different classes for "charContainer" (1,2,3,4). In your case the event should look like
$('.charContainer, .charContainer1, .charContainer2, .charContainer3').on('click', function(){
Also the way you do it - you will add multiple characters clicking on them one after another. How about this:
$(function() {
$('.charContainer').on('click', function(){
var yourCharacter = $(this);
$('#your').empty().append(yourCharacter.clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "characters">
<div class="charContainer">
<h2 id="c1">Darth Vader</h2>
<img class="vader" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer">
<h2 id="c2">Luke Skywalker</h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer">
<h2 id="c3">Obi Wan</h2>
<img class="obiwan" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer">
<h2 id="c4">Darth Maul</h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
</div>
Related
I know there are other ways around this, I'm more looking for an explanation of why this isn't working. I am trying to implement a quiz, the first section is multiple choice. When the correct answer is clicked I want the button to turn green, if any of the incorrect buttons are clicked I want them to turn red. I've checked the code on the validator and there doesn't appear to be any mistakes yet the buttons are still not interactive. Can someone explain what I am doing wrong here please?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Trivia!</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
let incorrects = document.querySelectorAll(".incorrect_answer");
incorrects.addEventListener('click', function() {
let clicked = event.srcElement;
clicked.style.backgroundColor = 'red';
});
let correct = document.querySelector(".correct_answer");
correct.addEventListener('click', function() {
correct.style.backgoundColor = 'green';
});
});
</script>
</head>
<body>
<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>How many species of Dolphin are there?</h3>
<button class="correct_answer">42</button>
<button class="incorrect_answer">53</button>
<button class="incorrect_answer">24</button>
<button class="incorrect_answer">11</button>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here use input tags -->
</div>
</div>
</body>
</html>
You are getting errors in the console, you didn't even open the dev tools
You can't use addEventListener on list of items
You are referencing event variable that doesn't exist
You had a typo in backgroundColor
document.addEventListener('DOMContentLoaded', function() {
let incorrects = document.querySelectorAll(".incorrect_answer");
incorrects.forEach(item => item.addEventListener('click', function(event) {
let clicked = event.srcElement;
clicked.style.backgroundColor = 'red';
}));
let correct = document.querySelector(".correct_answer");
correct.addEventListener('click', function() {
correct.style.backgroundColor = 'green';
});
});
<body>
<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>How many species of Dolphin are there?</h3>
<button class="correct_answer">42</button>
<button class="incorrect_answer">53</button>
<button class="incorrect_answer">24</button>
<button class="incorrect_answer">11</button>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here use input tags -->
</div>
</div>
The click of the button should toggle the visibility of that corresponding button's div. the first pic is what the code should look like from the start, and the second pic shows what the code should look like after clicking the submit button 1.
.toggleDiv{
background: gray;
max-width: 400px;
}
<!DOCTYPE html>
<html>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<body>
<div class="toggleNav">
<div class="Button1">
<input onclick="toggleMain" type="image" src="images/vinylBtn.png">
Button1
</div>
<div class="Button2">
<input onclick="toggleMain" type="image" src="images/cdBtn.png">
Button2
</div>
<div class="Button3">
<input onclick="toggleMain" type="image" src="images/tapeBtn.png">
Button3
</div>
</div>
<div class="toggleDiv">
<div id="mainText">
<h2>main div</h2>
<p>This is where the different divs shouls be toggling
</div>
<div id="Button1">
<p>This is the first div</p>
</div>
<div id="Button2">
<p>This is the second div</p>
</div>
<div id="Button3">
<p>This is the third div</p>
</div>
</div>
</body>
</html>
You can find all you elements by tag a in toggleNav and then add event listener. See my example in playground https://jsfiddle.net/denisstukalov/ompaeL0d/29/:
const links = document.querySelectorAll("div.toggleNav div a");
for (var i = 0; i < links.length ; i++) {
const divId = links[i].innerText
links[i].addEventListener("click",
function (event) {
event.preventDefault();
document.getElementById(divId).style.display = 'block';
},
false);
}
I am a beginner at this stuff, and right now I am working on a project. To keep it simple, my project right now has a sidebar that has four different options. (Schedule, progress, add course, drop course). I want users to be able to click on this options (after expanding the side bar) and display the information from which ever of the four they clicked on. I want this information to display on the same page, not link to another page. I have done this before by having invisible pages and using a showpage function. This time around though it is coded differently with classes, and I'm not sure how to go about this. Any help is appreciated!
Note: I don't have any data for these 4 pages right now - I just want to set it up so they function right now. To keep it short: I'm asking what code I need and where to display information (Ex: "Here is your schedule") on the same page when Schedule is clicked.
<!doctype html>
<html>
<head>
<title>STUDENT SCHEDULER APP</title>
<link rel="stylesheet" type="text/css" href="ssaStyles.css">
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function() {
console.log("jQuery was loaded");
});
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>Welcome!</h1>
</div>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Schedule
</li>
<li class="sidebar-item">Progress
</li>
<li class="sidebar-item">Add a course
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a
course</a></li>
</ul>
</div>
</body>
</html>
Its really simple all you have to do is create sections and these sections will be linked to your link, let me show you how.
<html>
<head>
<title>Example</title>
</head>
<body>
<!--create the links but add a # sign before you give them the section names-->
<div class="side-nav">
About
Contact
</div>
<!--Create an id with the same name as the link href source but leave out the # sign-->
<!--this is the about section-->
<div id="about">
<h1>Hello</h1>
</div>
<!--this is the contact section-->
<div id="contact">
<p> done</p>
</div>
</body>
</html>
the name you give your link should be the same as the div id name, and you will have to disable overflow in CSS if you want to....hope it made sense, if you need more help just ask.
Update:
I have updated the question with the code I am using, for example based on (select) element if (option)paint(/option) selected I want to show or hide the whole "working class" div .working or if (option) Body Shop (/option) selected I want to show the whole "non-productive class" div .non-productive
I have multiple HTML elements with similar divs structure but different class names however some of these divs do share certain text, how can I use .show() to show those divs using their .class name which contains that certain shared text?
$('#qualifications').change(function(){
if($('#qualifications').val() == 'Paint'){
$('div:contains("Paint")').show();
}
})
});
this is bad example cause I want to target the element using class name instead of ('div:contains('Paint')')
here's the code:
<select id='qualifications'>
<option>All</option>
<option>Body Shop</option>
<option>Electrician</option>
<option>Mech</option>
<option>Paint</option>
</select>
<!-- Working Class -->
<div class="working">
<div class="working-indicator">
<p>W</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Dennis Bokenkamp </h6>
<p><b><i>Paint</b></i></p>
<p>FIA</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>10:09:00 AM</p>
</div>
</div>
</div>
<!-- Non-Productive Class -->
<div class="non-productive">
<div class="non-productive-indicator">
<p>N</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Rick Richard </h6>
<p><b><i>Bodyshop 200%</b></i></p>
<p>DNF</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>11:09:00 AM</p>
</div>
</div>
</div>
Try this :
$(document).ready(function(){
$("#qualifications").on("change",function(){
if($(this).val() == 'Paint')
$("div.working:contains(Paint)").show();
})
})
I in below example use red border instead of show , because To show you what selected if you select paint of select box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<select id='qualifications'>
<option>All</option>
<option>Body Shop</option>
<option>Electrician</option>
<option>Mech</option>
<option>Paint</option>
</select>
<!-- Working Class -->
<div class="working">
<div class="working-indicator">
<p>W</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Dennis Bokenkamp </h6>
<p><b><i>Paint</b></i></p>
<p>FIA</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>10:09:00 AM</p>
</div>
</div>
</div>
<!-- Non-Productive Class -->
<div class="non-productive">
<div class="non-productive-indicator">
<p>N</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Rick Richard </h6>
<p><b><i>Bodyshop 200%</b></i></p>
<p>DNF</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>11:09:00 AM</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#qualifications").on("change",function(){
if($(this).val() == 'Paint')
$("div.working:contains(Paint)").css({border:"2px solid red"});
})
})
</script>
</body>
</html>
You can just use this syntax: $('div[class*="Paint"]').show()
I'm a student and new to javascript trying to load the images on my webpage using javascript. I tried to put the image sorce in an array and made for loop that would load images on the the site. But i can't seem to make it work. I'll post my code.
<!DOCTYPE html>
<html>
<head>
<title> Lucky lottery</title>
<link rel="stylesheet" href="theme.css">
<script> src = "imageLoader.js"</script>
</head>
<body>
<div id='container'>
<div id='header'>
<div id=title><h1 id='titlehead'> Lucky Lottery</h1></div>
</div>
<div id=gallery>
<div class=images id=image_0></div>
<div class=images id=image_1></div>
<div class=images id=image_2></div>
<div class=images id=image_3></div>
<div class=images id=image_4></div>
<div class=images id=image_6></div>
<div class=images id=image_7></div>
<div class=images id=image_8></div>
</div>
<div id=subfooter>
<div class=input>Please fill in your name</div>
<div id=win_btn>win </div>
</div>
<div id=footer>
<p>
<h2> Please Sign Up for only 10 dollars. Maybe you
win one of the amazing products. </h2></p>
</div>
JavaScript:
function imageLader() {
var imageLijst = ["../images/melk.png", "../images/wasmiddel.png", "../images/bike.png", "../images/holiday.png", "../images/lego-starwars.png",
"../images/electrische-tandenborstel.png", "../images/my-little-pony.png", "../images/wii-u.png"];
for(var i = 0; i <imageLijst.length; i++) {
var imgDiv = document.getElementById("image_"+ i);
var img = new Image();
img.src = imageLijst [i];
imgDiv.appendChild(img);
}
}
window.onload = imageLader;
<script> src = "imageLoader.js"</script>
is invalid. That should be
<script src="imageLoader.js"></script>
instead.
Also, though not shown here, just assigning to window.onload is dangerous, as it may be overwritten.
If you can, elaborate on how its not working. Is there an error (i.e. a JavaScript error) or is the behavior not as you expect (i.e. it appears to be doing nothing)?
I would suspect that in this instance its not doing anything because of the following line.
<script> src = "imageLoader.js"</script>
The "src" attribute needs to be defined as a part of the script tag. Trying changing it to this.
<script type="text/javascript" src="imageLoader.js"></script>
You are missing lots of quotation marks in your html markup
Example:
<div class=images id=image_0></div>
should be
<div class="images" id="image_0"></div>
or
<div class='images' id='image_0'></div>