I'm doing a memory and got a problem when turning cards. After turning two cards, when I turn a third one, I want the 2 previous cards to be turned again, but for some reason sometimes it works and sometimes only the first of the two cards turned turns. Any idea why this is happening?
JAVASCRIPT (where I think there's the problem):
var cartas = [];
var cartasGiradas = [];
var parejas= 0;
function cambiar_clase(){
cartasGiradas = document.getElementsByClassName("flip-container clicked");
if(cartasGiradas.length==2){
for (var i = 0; i <= cartasGiradas.length; i++) {
cartasGiradas[i].className="flip-container";
this.classList.add("clicked");}
}else if(cartasGiradas.length < 2){
this.classList.add("clicked");
}
}
function inicializar(){
cartas = document.getElementsByClassName("flip-container");
for(var i = 0; i < cartas.length; i++){
document.getElementById("a_girar"+i).addEventListener( 'click', cambiar_clase());
}
}
The HTML source:
<html>
<head>
<script type="text/javascript" src="javascript_memory.js"></script>
<link rel="stylesheet" type="text/css" href="css_memory.css">
<title>MEMORY GUERRA</title>
<meta charset="utf-8">
</head>
<body onload="inicializar()">
<table>
<tr>
<td class='color_fondo'>
<div class='flip-container' id='a_girar0'>
<div class='flipper'>
<div class='front'>
<img src='tras_carta.jpg' class='fotos'>
</div>
<div class='back'>
<img src='cartas/animal_15.jpg' class='fotos'>
</div>
</div>
</div>
</td>
<td class='color_fondo'>
<div class='flip-container' id='a_girar1'>
<div class='flipper'>
<div class='front'>
<img src='tras_carta.jpg' class='fotos'>
</div>
<div class='back'>
<img src='cartas/animal_14.jpg' class='fotos'>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Hope somebody can help and sorry if my english is bad, goodbye!
Related
I'm building a calculator, and while it's starting to work, I'm kind of stuck. I've pasted the HTML and the JS down here.
I've been trying to figure out what went wrong, and I think it's because of the functions calling each other and not properly... "closing/ending". I've been trying to see what went wrong with adding console.logs. I'll break it down here:
I press "on" and function listenFirst gets run.
listenFirst has an eventListener and waits for the user to click a number (firstNumber). As soon as a number is clicked, waitforOperator is run (which now has the firstNumberas an attribute. Now,
waitforOperator waits for a click on the plus sign, and as soon as the user clicks on the plus sign, listenSecondgets run. Now this is where it
goes wrong: as soon as I click the second number, waitforOperatorgets run again and now firstNumber and secondNumber are the same.
To be clear: I just want this problem solved before I delve into the other operators, so please don't pay attention to the other operators like minus and multiplication.
A nudge in the right direction would be nice! Thanks in advance.
let displayBox = document.getElementById("displayBox");
let pressButton = document.querySelectorAll(".column");
let turnOn = document.getElementById("turnOn");
let minus = document.getElementById("minus");
let plus = document.getElementById("plus");
let firstNumber = Number();
let secondNumber = Number();
turnOn.addEventListener("click", function() {
displayBox.textContent = "CALCULATOR ON. GIVE FIRST NR.";
console.log("launching function listenFirst");
listenFirst();
});
let listenFirst = () => {
console.log("launched listenFirst");
for (var i = 0; i < pressButton.length; i++) {
pressButton[i].addEventListener("click", function() {
firstNumber = displayBox.textContent = Number(this.id);
waitForOperator(firstNumber);
});
}
};
let listenSecond = () => {
console.log("launched listenSecond");
console.log(`first number is still ${firstNumber}`)
console.log(`waiting for you to press second number`)
for (var i = 0; i < pressButton.length; i++) {
pressButton[i].addEventListener("click", function() {
secondNumber = displayBox.textContent = Number(this.id);
console.log(`After click on second number, first number is ${firstNumber} and second number is ${secondNumber}`)
});
}
console.log(
`Now first number is ${firstNumber} and second number is ${secondNumber}`
);
};
let waitForOperator = () => {
console.log("launched waitForOperator");
console.log(`First number is ${firstNumber}`);
console.log("Waiting for you to press plus");
plus.addEventListener("click", function() {
listenSecond(firstNumber);
});
};
let calculateSum = () => {
console.log(`Second number is ${secondNumber}`);
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello Bulma!</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
/>
<script
defer
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<section class="section">
<h1 class="title has-text-centered" id="titleText">Calculator.</h1>
<div class="container">
<div class="field">
<a class="button is-fullwidth is-static" id="displayBox"></a><a class="button is-success" id="turnOn">ON</a>
</div>
<div class="calculator">
<div class="columns">
<div class="column" id="7">7</div>
<div class="column" id="8">8</div>
<div class="column" id="9">9</div>
<div class="column" id="minus">-</div>
</div>
<div class="columns">
<div class="column" id="4">4</div>
<div class="column" id="5">5</div>
<div class="column" id="6">6</div>
<div id="plus">+</div>
</div>
<div class="columns">
<div class="column" id="1">1</div>
<div class="column" id="2">2</div>
<div class="column" id="3">3</div>
<div class="column" id="equals">=</div>
</div>
<div class="columns">
<div class="column" id="0">0</div>
<div class="column" id="dot">.</div>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
You never remove the event listener you added to number number buttons in listenFirst. So when the user presses the buttons after waitForOperator both the code in listenFirst and listenSecond runs. listenFirst call waitForOperator again.
JavaScript: remove event listener Have a look at this answer for how to remove event listeners.
This is the site in question: driglight.com/Learn5.html
The purpose of this site is to click the audio and then choose which image you believe to be the correct representation of the note that was played.
I want to randomize the audio and answers every time the page is refreshed.
When the audio is randomized I need to make sure that the audio that is chosen has it's matching correct answer of an image also chosen and placed randomly among the answers. Also,when any possible answer image is clicked, a div will appear that says 'Good Job!' or 'incorrect'. So when the correct answer is randomized it will need to have the 'Good Job' div to follow it.
Here is the code in html:
<!DOCTYPE html>
<head>
<title>Learn</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/stuff.js"></script>
<!-- <script src="js/Timhasnoinput.js"></script> -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="header-wrapper">
<div class="container">
<div class="row-fluid">
<div class="site-name">
<h1>Music Website</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<div class="navbar">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="fw-icon-th-list"></i>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Learn</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">→ Hello</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">About</option>
<option value="#">Learn</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12 ">
<div class="main-caption">
<h1>Music Website</h1>
<h6>Learning Music</h6>
</div>
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12">
<div class="banner">
<div class="audiobuttonholder">
<div class="audioholder" style="padding-bottom:24px;">
<audio controls id="audio1">
hello
</audio>
</div>
<div class="buttonholder"; style="position: absolute; left: 10px; top: 40px;">
</div>
<div class = "numberPage">
Pg. 3 Trebble Cleff
</div>
<div class = "control">
<ul>
<div id="div1" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div1image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage1" style="height:200px;width:200px;
onclick="showDivOne()" />
</ul>
<ul>
<div id="div2" style="display:none; float: right; margin-right: 120px;" >
<img id=div2image imageC="incorrect.png" src="incorrect.png" />
</div>
<input type="image" id="myimage2" style="height:200px;width:200px; padding-
top:24px;" onclick="showDivTwo()"/>
</ul>
<ul>
<div id="div3" style="display:none; float: right; margin-right: 120px;
padding-top: 40px;" >
<img id=div3image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage3" style="height:200px;width:200px;padding-
top:24px;" onclick="showDivThree()"/>
</ul>
<ul>
<div id="div4" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div4image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage4" style="height:200px;width:200px;"
onclick="showDivFour()" />
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="featured-images">
<ul class="grid effect-8" id="grid">
<li>
<div class="block">
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</li>
</ul>
<div class="block-content">
<div class="user-info">
<h4>Home</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Learn</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Contact</h4>
<h6> </h6>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/classie.js"></script>
<script src="js/AnimOnScroll.js"></script>
<script>
new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );
</script>
<script>
$('#myCarousel').carousel({
interval: 1800
});
</script>
</body>
</html>
And here is the code in Javascript:
function showDivFour() {
document.getElementById('div4').style.display = "block";
}
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
function showDivOne() {
document.getElementById('div1').style.display = "block";
}
function showDivTwo() {
document.getElementById('div2').style.display = "block";
}
function showDivThree() {
document.getElementById('div3').style.display = "block";
}
// THIS SHOULD BE THE BETTER ONE
var correctFileC = $('#div1image').attr("div_answer");
var correctFileC = $('#div2image').attr("div_answer");
var correctFileC = $('#div3image').attr("div_answer");
var correctFileC = $('#div4image').attr("div_answer");
var correctFile1 = $('#myimage1').attr("div_if");
var correctFile2 = $('#myimage2').attr("div_if");
var correctFile3 = $('#myimage3').attr("div_if");
var correctFile4 = $('#myimage4').attr("div_if");
var audio_1 = ["LowATrebbleCleffPianoVC.mp3","LowETrebbleCleffPianoVC.mp3",
"LowGTrebbleCleffPianoVC.mp3","MidBTrebbleCleffPianoVC.mp3",
"MidCTrebbleCleffPianoVC.mp3","MidDTrebbleCleffPianoVC.mp3"];
var rand_audio_1 =
audio_1[Math.floor(Math.random()*audio_1.length)].getElementByName.
(audioholder.innerHTML(rand_audio_1);
function div_if(){
if(audio_1[0]){
var R1 = ["myimage1","TrebbleCleffLowA.gif"],["myimage2","TrebbleCleffLowA.gif"],["myimage3","TrebbleCleffLowA.gif"],["myimage4","TrebbleCleffLowA.gif"];
if[R1(var i=0; i<R1.length;i++).length=4];
} else if(audio_1[1]){
var R2 = ["myimage1","LowE.gif"],["myimage2","LowE.gif"],["myimage3","LowE.gif"],["myimage4","LowE.gif"];
if[R2(var i=0; i<R2.length;i++).length=4];
do nothing
} else if(audio_1[2]){
var R3 = ["myimage1","LowG.gif"],["myimage2","LowG.gif"],["myimage3","LowG.gif"],["myimage4","LowG.gif"];
if[R3(var i=0; i<R3.length;i++).length=4];
do nothing
} else if(audio_1[3]){
var R4 = ["myimage1","MidB.gif"],["myimage2","MidB.gif"],["myimage3","MidB.gif"],["myimage4","MidB.gif"];
if[R4(var i=0; i<R4.length;i++).length=4];
do nothing
} else if(audio_1[4]){
var R5 = ["myimage1","MidC.gif"],["myimage2","MidC.gif"],["myimage3","MidC.gif"],["myimage4","MidC.gif"];
if[R5(var i=0; i<R5.length;i++).length=4];
do nothing
{ else if(audio_1[5]){
var R6 = ["myimage1","MidD.gif"],["myimage2","MidD.gif"],["myimage3","MidD.gif"],["myimage4","MidD.gif"];
if[R6(var i=0; i<R6.length;i++).length=4];
do nothing
} else if{
L1.Push(R);
} else if{
L1.Push(R1)
} else if{
L1.Push(R2)
} else if{
L1.Push(R3)
} else if{
L1.Push(R4)
}
function div_answer(){
if(R[0]){
document.getElementById(div1).innerHTML(divC);
divC.src='GoodJob.png'{
else if(R[1]){
document.getElementById(div2).innerHTML(divC);
divC.src='GoodJob.png'
}
else if(R[2]){
document.getElementById(div3).innerHTML(divC);
divC.src='GoodJob.png'
}
else {
document.getElementById(div4).innerHTML(divC);
divC.src='GoodJob.png'
}
}
}
I assume every audio fragment will have an image? So with that in mind, you create a random index to select an audio fragment (which you already do). Why don't you store that index in a variable and associate the image fragment with it?
Another option would be to create an object. So you make your array with audiofragments and then you initialize a new JS object, and assign the names of the images to 'properties' with your audiofragment as key. Like this:
var images = {};
images[audioname] = image-name;
***Do this for each audiofragment of course***
That way you can just ask the image from your images-object, using the property audioname.
When the page renders, place some value inside the attributes for the images or div:
<img id=myimage data-audio-file="xyz123.mp3" src="...." />
<div data-audio-file="xyz123.mp3" src="...." >My Content</div>
Read the attribute out when it's time to take some action:
var correctFile = $('#myimage').attr("data-audio-file");
So i have an html document with a running some sample pic.
However I want this data to come from a javascript file? Is this possible?
This is what i have so far:
HTML
<link rel="stylesheet" type="text/css" href="FrontEnd.css"/>
<title> Test script for ticker </title>
</head>
<div class="container">
<body>
<div id="allTop">
<h1>
</h1>
<div class="clearfix">
<div class="forecast">
<div id="pic"></div>
<div id="forecast"></div>
<div id="temp"></div>
</div>
</div>
<div id="ticker">
<marquee>
<img
src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg"
Width=80 Height=80 alt="Milford Sound in New Zealand" />NewZealand
</marquee>
</div>
</div>
<div class="captured">
<div class="graph"></div>
</div>
</body>
</div>
</html>
js function
function buildList(){
var data= [1,2,3,4,5,6,7,8];
var listitems = document.getElementsByTagName('marquee');
for(var i = 0; i <= data.length-1;i++){
var newListItem = data[i] + 'there should be an img coming in from an array here';
listitems.innerHTML = newListItem;
}
}
So I am confused on how can i append data into marquee tags from this function?
Simple append Data not over write
function buildList(){
var data= [1,2,3,4,5,6,7,8];
var listitems = document.getElementsByTagName('marquee');
for(var i = 0; i <= data.length-1;i++){
var newListItem = data[i]; //'<img something /. etc etc
listitems[0].innerHTML += newListItem;
}
}
when i press any key i need to display first div "d1" others hide and i press any key again it display secound div "d2" others hide and press any key again it display third div "d3" others hide ..till six div..not repeating the process again.
<div class="objects" id="d1">
<img src="images/d1.jpg" />
</div>
<div class="objects" id="d2">
<img src="images/d2.jpg" />
</div>
<div class="objects" id="d3">
<img src="images/d3.jpg" />
</div>
.......
.......
<div class="objects" id="d6">
<img src="images/d6.jpg" />
</div>
when i press any key i need to display 1st div then i press any key display 2nd div..till 6th div..
how to do it in javascript?
<html>
<head>
<style type="text/css">
.Div
{
display: none;
}
</style>
<script type="text/javascript">
var i = 0;
function KeyHandler() {
i++;
var divs = document.getElementsByClassName("Div");
for (var div = 0; div < divs.length - 1; div++) {
divs[div].style.display = 'none';
}
var ele = document.getElementById("d" + i);
ele.style.display = "block";
}
</script>
</head>
<body onkeyup="KeyHandler()">
Press any key..
<div id="d1" class="Div">
<h5>
Div1</h5>
</div>
<div id="d2" class="Div">
<h5>
Div2</h5>
</div>
<div id="d3" class="Div">
<h5>
Div3</h5>
</div>
<div id="d4" class="Div">
<h5>
Div4</h5>
</div>
<div id="d5" class="Div">
<h5>
Div5</h5>
</div>
<div id="d6" class="Div">
<h5>
Div6</h5>
</div>
</body>
</html>
Try this out
var currentVisible = 0;
document.onkeyup = function() {
// First hide all by class 'objects'
// Requires IE9+ FF3+, others are supported
var objs = document.getElementsByClassName('objects');
for (var i=0; i<objs.length; i++) {
objs[i].style.display = 'none';
}
// Show the one we are supposed to show
if (++currentVisible == 7)
currentVisible = 1;
var el = document.getElementById('d' + currentVisible);
el.style.display = 'block';
}
100% untested tho, since I have no access to any fiddle atm.
I have four divs, each div contain images and contents. one next and previous button. at a time only div will show. on click of next the second div have to be shown and first will hide. same upto fourth div. Need to use pure Javascript. No jquery or javascript plugins is allowed.... :(. Can anyone help me to do this?.
Thanks!
My html Code:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="theProduct">
<div id="slides"> <img src="img/prev.jpg" width="29" height="29" alt="Arrow Prev"> <img src="img/next.jpg" width="29" height="29" alt="Arrow Next">
<!-- Show/hide Div strating here -->
<div class="slides_container">
<div class="div1">
<div class="img1">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div2">
<div class="img2">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div3">
<div class="img3">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div4">
<div class="img4">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
</div>
<!-- Show/Hide Div ending here -->
</div>
<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame"> </div>
</div>
</body>
</html>
Practical with this below
<style type="text/css" media="screen">
#container{position:relative;width:120px;height:120px;}
#container div{position:absolute;width:120px;height:120px;}
#box-red{background:red;}
#box-yellow{background:yellow;display:none;}
#box-green{background:green;display:none;}
#box-maroon{background:maroon;display:none;}
</style>
Javascipt
<script type="text/javascript">
var $c =0;
function next(){
var boxes = document.getElementsByClassName("box");
$c +=1;
if($c >= boxes.length) $c = 0;
for (var $i=0;$i<boxes.length;$i++){
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
function prev(){
var boxes = document.getElementsByClassName("box");
$c -=1;
if($c < 0) $c = (boxes.length-1);
for (var $i=0;$i<boxes.length;$i++){
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
</script>
HTML
<div id="container">
<div id="box-red" class="box">DIV1</div>
<div id="box-yellow" class="box">DIV2</div>
<div id="box-green" class="box">DIV3</div>
<div id="box-maroon" class="box">DIV4</div>
</div>
previous next
I think this is what you are loking for:
http://girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript
But you could put that in one function:
<script language="JavaScript">
function ShowHide(divId){
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>
function toggleImage(forwrad){
var imageConainer = document.getElementByID(Your Parent div id);
var images = imageContainer.childNodes;
var showIndex = '';
for(var i=0; i<images.length;i++){
if(images[i].style.display == 'block'){
images[i].style.display == 'none';
if(forwrad){
showIndex = 1+1;
}
else{
showIndex = 1-1;
}
}
}
images[showIndex].style.display = true;
}
technically it's possible with pure CSS as well. with the :target pseudo class. but that would pollute your url with # tags. But you may actually want that.
Also Selectivizr is a good polyfill for old browsers