When I run my code it give me this error: TypeError: Cannot read property 'style' of null at onlyShowInput1H (/:673:42) at showInputH (/:995:9) at HTMLButtonElement.onclick (/:85:117
In more detail here is what code does:
user inputs 1-10 tasks in the 1st div user inputs 1-10 tasks in the 2nd div (stored in localStorage)
user inputs 1-10 tasks in the 3nd div(stored in localStorage)
A do list is displayed with all the inputs the user inputed(stored in localStorage)
This error is being displayed: TypeError: Cannot read property 'addEventListener' of undefined at /script.js:66:5 TypeError: Cannot read property 'style' of null at onlyShowInput1H (/ITHB.js:457:42) at showInputH (/ITHB.js:779:9) at HTMLButtonElement.onclick (/:85:104)
I think the second error is affecting my code, from saving the 21st input because it's not reading it
Here is a link to a plunker of my code: https://plnkr.co/edit/HbT4WKFpqQrW5Ikv?open=lib%2Fscript.js
And here is a code snippet (not of my entire code but the part that isn't working):
function showInputHText() {
document.getElementById("inputHText").style.display = "block";
}
/* START of show input functions */
/* START: hard show input functions */
function dontShowInput1H() {
document.getElementById("hard-block").style.display = "none";
}
function onlyShowInput1H() {
document.getElementById("data21").style.display = "block";
document.getElementById("data22").style.display = "none";
document.getElementById("toDo22").style.display = "none";
document.getElementById("data23").style.display = "none";
document.getElementById("toDo23").style.display = "none";
document.getElementById("data24").style.display = "none";
document.getElementById("toDo24").style.display = "none";
document.getElementById("data25").style.display = "none";
document.getElementById("toDo25").style.display = "none";
document.getElementById("data26").style.display = "none";
document.getElementById("toDo26").style.display = "none";
document.getElementById("data27").style.display = "none";
document.getElementById("toDo27").style.display = "none";
document.getElementById("data28").style.display = "none";
document.getElementById("toDo28").style.display = "none";
document.getElementById("data29").style.display = "none";
document.getElementById("toDo29").style.display = "none";
document.getElementById("data30").style.display = "none";
document.getElementById("toDo30").style.display = "none";
}
function onlyShowInput2H() {
document.getElementById("data21").style.display = "block";
document.getElementById("data22").style.display = "block";
document.getElementById("data23").style.display = "none";
document.getElementById("toDo23").style.display = "none";
document.getElementById("data24").style.display = "none";
document.getElementById("toDo24").style.display = "none";
document.getElementById("data25").style.display = "none";
document.getElementById("toDo25").style.display = "none";
document.getElementById("data26").style.display = "none";
document.getElementById("toDo26").style.display = "none";
document.getElementById("data27").style.display = "none";
document.getElementById("toDo27").style.display = "none";
document.getElementById("data28").style.display = "none";
document.getElementById("toDo28").style.display = "none";
document.getElementById("data29").style.display = "none";
document.getElementById("toDo29").style.display = "none";
document.getElementById("data30").style.display = "none";
document.getElementById("toDo30").style.display = "none";
}
function onlyShowInput3H() {
document.getElementById("data21").style.display = "block";
document.getElementById("data22").style.display = "block";
document.getElementById("data23").style.display = "block";
document.getElementById("data24").style.display = "none";
document.getElementById("toDo24").style.display = "none";
document.getElementById("data25").style.display = "none";
document.getElementById("toDo25").style.display = "none";
document.getElementById("data26").style.display = "none";
document.getElementById("toDo26").style.display = "none";
document.getElementById("data27").style.display = "none";
document.getElementById("toDo27").style.display = "none";
document.getElementById("data28").style.display = "none";
document.getElementById("toDo28").style.display = "none";
document.getElementById("data29").style.display = "none";
document.getElementById("toDo29").style.display = "none";
document.getElementById("data30").style.display = "none";
document.getElementById("toDo30").style.display = "none";
}
function onlyShowInput4H() {
document.getElementById("data21").style.display = "block";
document.getElementById("data22").style.display = "block";
document.getElementById("data23").style.display = "block";
document.getElementById("data24").style.display = "block";
document.getElementById("data25").style.display = "none";
document.getElementById("toDo25").style.display = "none";
document.getElementById("data26").style.display = "none";
document.getElementById("toDo26").style.display = "none";
document.getElementById("data27").style.display = "none";
document.getElementById("toDo27").style.display = "none";
document.getElementById("data28").style.display = "none";
document.getElementById("toDo28").style.display = "none";
document.getElementById("data29").style.display = "none";
document.getElementById("toDo29").style.display = "none";
document.getElementById("data30").style.display = "none";
document.getElementById("toDo30").style.display = "none";
}
function onlyShowInput5H() {
document.getElementById("data21").style.display = "block";
document.getElementById("data22").style.display = "block";
document.getElementById("data23").style.display = "block";
document.getElementById("data24").style.display = "block";
document.getElementById("data25").style.display = "block";
document.getElementById("data26").style.display = "none";
document.getElementById("toDo26").style.display = "none";
document.getElementById("data27").style.display = "none";
document.getElementById("toDo27").style.display = "none";
document.getElementById("data28").style.display = "none";
document.getElementById("toDo28").style.display = "none";
document.getElementById("data29").style.display = "none";
document.getElementById("toDo29").style.display = "none";
document.getElementById("data30").style.display = "none";
document.getElementById("toDo30").style.display = "none";
}
function onlyShowInput6H() {
document.getElementById("data21").style.display = "block";
document.getElementById("data22").style.display = "block";
document.getElementById("data23").style.display = "block";
document.getElementById("data24").style.display = "block";
document.getElementById("data25").style.display = "block";
document.getElementById("data26").style.display = "block";
document.getElementById("data27").style.display = "none";
document.getElementById("toDo27").style.display = "none";
document.getElementById("data28").style.display = "none";
document.getElementById("toDo28").style.display = "none";
document.getElementById("data29").style.display = "none";
document.getElementById("toDo29").style.display = "none";
document.getElementById("data30").style.display = "none";
document.getElementById("toDo30").style.display = "none";
}
function onlyShowInput7H() {
document.getElementById("data21").style.display = "block";
document.getElementById("data22").style.display = "block";
document.getElementById("data23").style.display = "block";
document.getElementById("data24").style.display = "block";
document.getElementById("data25").style.display = "block";
document.getElementById("data26").style.display = "block";
document.getElementById("data27").style.display = "block";
document.getElementById("data28").style.display = "none";
document.getElementById("toDo28").style.display = "none";
document.getElementById("data29").style.display = "none";
document.getElementById("toDo29").style.display = "none";
document.getElementById("data30").style.display = "none";
document.getElementById("toDo30").style.display = "none";
}
function onlyShowInput8H() {
document.getElementById("data21").style.display = "block";
document.getElementById("data22").style.display = "block";
document.getElementById("data23").style.display = "block";
document.getElementById("data24").style.display = "block";
document.getElementById("data25").style.display = "block";
document.getElementById("data26").style.display = "block";
document.getElementById("data27").style.display = "block";
document.getElementById("data28").style.display = "block";
document.getElementById("data29").style.display = "none";
document.getElementById("toDo29").style.display = "none";
document.getElementById("data30").style.display = "none";
}
function onlyShowInput9H() {
document.getElementById("data21").style.display = "block";
document.getElementById("data22").style.display = "block";
document.getElementById("data23").style.display = "block";
document.getElementById("data24").style.display = "block";
document.getElementById("data25").style.display = "block";
document.getElementById("data26").style.display = "block";
document.getElementById("data27").style.display = "block";
document.getElementById("data28").style.display = "block";
document.getElementById("data29").style.display = "block";
document.getElementById("data30").style.display = "none";
document.getElementById("toDo30").style.display = "none";
}
function onlyShowInput10H() {
document.getElementById("data21").style.display = "block";
document.getElementById("data22").style.display = "block";
document.getElementById("data23").style.display = "block";
document.getElementById("data24").style.display = "block";
document.getElementById("data25").style.display = "block";
document.getElementById("data26").style.display = "block";
document.getElementById("data27").style.display = "block";
document.getElementById("data28").style.display = "block";
document.getElementById("data29").style.display = "block";
document.getElementById("data30").style.display = "block";
}
/*START show save btns*/
function showSaveE() {
document.getElementById("saveE").style.display = "block";
}
function showSaveM() {
document.getElementById("saveM").style.display = "block";
}
function showSaveH() {
document.getElementById("saveH").style.display = "block";
}
/*END of show btns*/
/* START: function show input easy*/
function showInputE() {
var numEAI = document.getElementById('numEAI');
if (numEAI.value == 0) {
alert("If you don't have any, click I don't have any easy assignments today");
} else if (numEAI.value == 1) {
showSaveE();
onlyShowInput1();
} else if (numEAI.value == 2) {
showSaveE();
onlyShowInput2();
} else if (numEAI.value == 3) {
showSaveE();
onlyShowInput3();
} else if (numEAI.value == 4) {
showSaveE();
onlyShowInput4();
} else if (numEAI.value == 5) {
showSaveE();
onlyShowInput5();
} else if (numEAI.value == 6) {
showSaveE();
onlyShowInput6();
} else if (numEAI.value == 7) {
showSaveE();
onlyShowInput7();
} else if (numEAI.value == 8) {
showSaveE();
onlyShowInput8();
} else if (numEAI.value == 9) {
showSaveE();
onlyShowInput9();
} else if (numEAI.value == 10) {
showSaveE();
onlyShowInput10();
} else {
alert("Try doing between 1-10 easy assignments OR click I dont have any easy assignments today if you dont have any");
}
}
/* START: function show input medium*/
function showInputM() {
var numMAI = document.getElementById('numMAI');
if (numMAI.value == 0) {
alert("If you don't have any, click I don't have any medium assignments");
} else if (numMAI.value == 1) {
showSaveM();
onlyShowInput1M();
} else if (numMAI.value == 2) {
showSaveM();
onlyShowInput2M();
} else if (numMAI.value == 3) {
showSaveM();
onlyShowInput3M();
} else if (numMAI.value == 4) {
showSaveM();
onlyShowInput4M();
} else if (numMAI.value == 5) {
showSaveM();
onlyShowInput5M();
} else if (numMAI.value == 6) {
showSaveM();
onlyShowInput6M();
} else if (numMAI.value == 7) {
showSaveM();
onlyShowInput7M();
} else if (numMAI.value == 8) {
showSaveM();
onlyShowInput8M();
} else if (numMAI.value == 9) {
showSaveM();
onlyShowInput9M();
} else if (numMAI.value == 10) {
showSaveM();
onlyShowInput10M();
} else {
alert("Try doing 1-10 medium assuignments OR click I dont have any medium assignments today if you dont have any");
}
}
/* START: function show input hard*/
function showInputH() {
var numHAI = document.getElementById('numHAI');
if (numHAI.value == 0) {
alert("If you don't have any, click I don't have any hard assignents");
} else if (numHAI.value == 1) {
onlyShowInput1H();
showSaveH();
} else if (numHAI.value == 2) {
onlyShowInput2H();
showSaveH();
} else if (numHAI.value == 3) {
onlyShowInput3H();
showSaveH();
} else if (numHAI.value == 4) {
onlyShowInput4H();
showSaveH();
} else if (numHAI.value == 5) {
onlyShowInput5H();
showSaveH();
} else if (numHAI.value == 6) {
onlyShowInput6H();
showSaveH();
} else if (numHAI.value == 7) {
onlyShowInput7H();
showSaveH();
} else if (numHAI.value == 8) {
onlyShowInput8H();
showSaveH();
} else if (numHAI.value == 9) {
onlyShowInput9H();
showSaveH();
} else if (numHAI.value == 10) {
onlyShowInput10H();
showSaveH();
} else {
alert("Try doing between 1-10 hard assignments OR click I dont have any hard assignments today if you dont have any");
}
}
/* display functions in form */
function displayM() {
document.getElementById("easyAssignments").style.display = "none";
document.getElementById("mediumAssignments").style.display = "block";
}
function displayH() {
document.getElementById("mediumAssignments").style.display = "none";
document.getElementById("hardAssignments").style.display = "block";
}
function displayTDL() {
document.getElementById("hardAssignments").style.display = "none";
document.getElementById("toDoList").style.display = "block";
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>To Do List</title>
<!--JS Files-->
</head>
<body style="font-family: 'Roboto', sans-serif;">
<form id="ui">
<fieldset>
<!--Start of Form-->
<div id="hardAssignments">
<p>How many hard tasks do you have to do today?</p>
<input class="pink" min="0" max="10" type="number" id="numHAI" required>
<p></p>
<script src="ITHB.js"></script>
<button style="display:block" class="btn btn-primary" onclick="showInputHText(); showInputH();">Enter</button>
<p style="display:none;" id="inputHText">List your hard tasks here (then click save)</p>
<input class="red" style="display:none" id='data21' name='data21'>
<input id="saveH" value="submit" class="btn btn-primary" type="submit" onclick="displayTDL()" />
<p>or</p>
<button value="submit" type="submit" class="btn btn-secondary" onclick="dontShowInput1H();
displayTDL();">
I don't have any hard tasks today
</button>
</div>
</div>
<center>
<!--End of Form-->
<!--Start of To-do List-->
<div text-align="center" id=toDoList style="display:none">
<h1>To Do List:</h1>
<h3>Hard Tasks:</h3>
<p>All your hard tasks for the day</p>
<input type="checkbox" style="font-size: 30px;" id="toDo21" name="toDo21" value="toDo21" />
<label style="font-size: 30px;" class="strikethrough" for="toDo21"><output id='out21' for="data21"></output></label><br>
</fieldset>
</form>
</div>
<script src="ITHB.js"></script>
<script src="script.js"></script>
<!--End of To-do List-->
</center>
</body>
</html>
First error: You are missing name="btn" on line 26 of index.html
<button name="btn" class="btn btn-primary" onclick="showInputEText(); showInputE();">Enter</button>
Second error: You have two typos on line 50 and 51 of script.js, ou should be out.
var out15 = ui.out15;
Third error: You have are trying to get a lot of elements that dont exist in your html (data22 - data30).
Related
I'm sure there is a way to write a shorter version of the following js code. In the end I'm just repeating myself over and over again. Any suggestions?
Thanks a lot!
if (designVal == 0 && colorVal == 0) {
design01yellow.style.display = "block";
design01black.style.display = "none";
design01blue.style.display = "none";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
} else if (designVal == 0 && colorVal == 1) {
design01yellow.style.display = "none";
design01black.style.display = "block";
design01blue.style.display = "none";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
} else if (designVal == 0 && colorVal == 2) {
design01yellow.style.display = "none";
design01black.style.display = "none";
design01blue.style.display = "block";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
} else if
///AND SO ON
Give all the elements a common class (e.g. class="design"). Loop over them, setting them all to none, then set the specific element to block.
document.querySelectorAll(".design").forEach(el => el.style.display = "none");
if (designVal == 0 && colorVal == 0) {
design01yellow.style.display = "block";
} else if (designVal == 0 && colorVal == 1) {
design01black.style.display = "block";
} ...
I'd normalize them to 'display: none' and then only set the one you want to display: block.
if (designVal === 0) {
design01yellow.style.display = "none";
design01black.style.display = "none";
design01blue.style.display = "none";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
if(colorVal === 0) {
design01yellow.style.display = "block";
} else if (colorVal === 1) {
design01black.style.display = "block";
} else if (colorVal === 2) {
design01blue.style.display = "block";
}
// and so on
}
my code isn't working:
JS:
function openform_1() {
var a = document.getElementById("2");
if (a.style.display === "inline") {
document.getElementById("form_1").style.display = ("inline");
document.getElementById("form_1_b").style.display = ("inline");
document.getElementById("2").style.display = ("none");
document.getElementById("3").style.display = ("none");
document.getElementById("4").style.display = ("none");
document.getElementById("5").style.display = ("none");
document.getElementById("6").style.display = ("none");
document.getElementById("7").style.display = ("none");
document.getElementById("8").style.display = ("none");
document.getElementById("9").style.display = ("none");
}
if (a.style.display === "none") {
document.getElementById("form_1").style.display = ("none");
document.getElementById("form_1_b").style.display = ("none");
document.getElementById("2").style.display = ("inline");
document.getElementById("3").style.display = ("inline");
document.getElementById("4").style.display = ("inline");
document.getElementById("5").style.display = ("inline");
document.getElementById("6").style.display = ("inline");
document.getElementById("7").style.display = ("inline");
document.getElementById("8").style.display = ("inline");
document.getElementById("9").style.display = ("inline");
}}
HTML:
<img src="img/edit.png" width="15" height="15" class="edit"id="1" onclick="openform_1()">
<img src="img/edit.png" width="15" height="15" class="edit" id="2" onclick="openform_2()">
...
CSS:
.edit {display: inline;}
When I'm clicking on the image with the id "1" nothing happens. What I want it to happen is that all elements with the id from 2-9 disappear and the elements with the id "form_1" and "form_1_b" appear.
Clicking "1" again should restore everything.
edit:
function openform_2() {
var a = document.getElementById("1");
if (a.style.display === "inline") {
document.getElementById("form_2").style.display = "inline";
document.getElementById("form_2_b").style.display = "inline";
document.getElementById("1").style.display = "none";
document.getElementById("3").style.display = "none";
document.getElementById("4").style.display = "none";
document.getElementById("5").style.display = "none";
document.getElementById("6").style.display = "none";
document.getElementById("7").style.display = "none";
document.getElementById("8").style.display = "none";
document.getElementById("9").style.display = "none";
}
if (a.style.display === "none") {
document.getElementById("form_2").style.display = "none";
document.getElementById("form_2_b").style.display = "none";
document.getElementById("1").style.display = "inline";
document.getElementById("3").style.display = "inline";
document.getElementById("4").style.display = "inline";
document.getElementById("5").style.display = "inline";
document.getElementById("6").style.display = "inline";
document.getElementById("7").style.display = "inline";
document.getElementById("8").style.display = "inline";
document.getElementById("9").style.display = "inline";
}}
This is how it looks like in the browser:
Clicked:
This is how it should look like when I click one time.
Use an else if on the second if statement.
If it isn't an else if then it would say does it equal inline? Then set it to none. Does it equal none? Yes it does because it just changed it to it, so change it back to inline.
Else if means it won't do it if the first if is true.
Consider replacing ('inline') with "inline".
Removes the quotes.
For example:
document.getElementById("3").style.display = "inline";
You made classic repetitive errors.
case FOCUS_AA:
if(keyCode == KEY_RIGHT){
focus = FOCUS_AB;
clearTimeout(a);
document.getElementById("background").style.display = "block";
document.getElementById("backLight").style.display = "block";
document.getElementById("treeBoard").style.display = "block";
document.getElementById("bImg").style.display = "block";
document.getElementById("aImg").style.display = "none";
document.getElementById("a0").style.display = "none";
document.getElementById('banana').play();
banana1();
function banana1(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b0").style.display = "block";
/*var a = setTimeout(apple2, 1000);*/
b = setTimeout(banana2, 1000);
}
function banana2(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b0").style.display = "none";
document.getElementById("b1").style.display = "block";
b = setTimeout(banana3, 1000);
}
function banana3(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b1").style.display = "none";
document.getElementById("b2").style.display = "block";
b = setTimeout(banana4, 1000);
}
function banana4(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b2").style.display = "none";
document.getElementById("b3").style.display = "block";
b = setTimeout(banana5, 1000);
}
function banana5(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b3").style.display = "none";
document.getElementById("b4").style.display = "block";
b = setTimeout(banana6, 1000);
}
function banana6(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b4").style.display = "none";
document.getElementById("b5").style.display = "block";
b = setTimeout(banana7, 1000);
}
function banana7(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b5").style.display = "none";
document.getElementById("b6").style.display = "block";
b = setTimeout(banana8, 1000);
}function banana8(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b6").style.display = "none";
document.getElementById("b0").style.display = "block";
b = setTimeout(banana8, 1000);
}
}else if(keyCode == KEY_BACK){
focus == FOCUS_A
window.location.href = 'Shop.html';
}
break;
case FOCUS_AB:
if(keyCode == KEY_LEFT){
focus = FOCUS_AA;
clearTimeout(b);
document.getElementById("background").style.display = "block";
document.getElementById("backLight").style.display = "block";
document.getElementById("treeBoard").style.display = "block";
document.getElementById("a0").style.display = "block";
document.getElementById("aImg").style.display = "block";
document.getElementById("bImg").style.display = "none";
document.getElementById("b0").style.display = "none";
document.getElementById('apple').play();
apple0();
function apple0(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a0").style.display = "block";
a = setTimeout(apple1, 1000);
}
function apple1(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a0").style.display = "none";
document.getElementById("a1").style.display = "block";
a = setTimeout(apple2, 1000);
}
function apple2(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a1").style.display = "none";
document.getElementById("a2").style.display = "block";
a = setTimeout(apple3, 1000);
}
function apple3(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a2").style.display = "none";
document.getElementById("a3").style.display = "block";
a = setTimeout(apple4, 1000);
}
function apple4(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a3").style.display = "none";
document.getElementById("a4").style.display = "block";
a = setTimeout(apple5, 1000);
}
function apple5(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a4").style.display = "none";
document.getElementById("a5").style.display = "block";
a = setTimeout(apple6, 1000);
}
function apple6(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a5").style.display = "none";
document.getElementById("a0").style.display = "block";
a = setTimeout(apple6, 1000);
}
}else if(keyCode == KEY_RIGHT){
focus = FOCUS_AC;
clearTimeout(b);
document.getElementById('b_').style.display ='none';
document.getElementById("background").style.display = "block";
document.getElementById("backLight").style.display = "block";
document.getElementById("treeBoard").style.display = "block";
document.getElementById("c0").style.display = "block";
document.getElementById("cImg").style.display = "block";
document.getElementById("bImg").style.display = "none";
document.getElementById("b0").style.display = "none";
document.getElementById('cake').play();
cake1();
function cake1(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c0").style.display = "block";
c = setTimeout(cake2, 1000);
}
function cake2(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c0").style.display = "none";
document.getElementById("c1").style.display = "block";
c = setTimeout(cake3, 1000);
}
function cake3(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c1").style.display = "none";
document.getElementById("c2").style.display = "block";
c = setTimeout(cake4, 1000);
}
function cake4(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c2").style.display = "none";
document.getElementById("c3").style.display = "block";
c = setTimeout(cake5, 1000);
}
function cake5(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c3").style.display = "none";
document.getElementById("c4").style.display = "block";
c = setTimeout(cake6, 1000);
}
function cake6(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c4").style.display = "none";
document.getElementById("c0").style.display = "block";
c = setTimeout(cake6, 1000);
}
} else if(keyCode == KEY_BACK){
focus == FOCUS_B
window.location.href = 'Shop.html';
}
break;
this shows using setTimeout to animate the images.
when i press "KEY_RIGHT" : the images stopped and shows next animated image.
but problem is images overlaps with stopped images and the next images.
how do i remove all the stopped or previous images(FOCUS_AA) when key pressed next step(FOCUS_AB)?
If you were to animate via jQuery, you could call .stop() on all animations and have the always action on animations would be to hide the photos. That way, even if you were in the middle of an animation, the animation would stop, go immediately to the end and the next animation would go.
This code meets all conditions, someone please tell me where i am going wrong; I have checked and i cant see anything wrong with the code. why are all the conditions met.
<script>
$( document ).ready(function() {
var style = $('#el_teams_TeamFormation span').html();
alert (style);
if (style = "4-4-2")
{
document.getElementById('footballpitch1').style.display = "none";
document.getElementById('footballpitch2').style.display = "none";
document.getElementById('footballpitch3').style.display = "none";
document.getElementById('footballpitch4').style.display = "none";
document.getElementById('footballpitch1').style.display = "block";
}
if (style = "3-4-3")
{
document.getElementById('footballpitch1').style.display = "none";
document.getElementById('footballpitch2').style.display = "none";
document.getElementById('footballpitch3').style.display = "none";
document.getElementById('footballpitch4').style.display = "none";
document.getElementById('footballpitch2').style.display = "block";
}
if (style = "3-5-2") {
document.getElementById('footballpitch1').style.display = "none";
document.getElementById('footballpitch2').style.display = "none";
document.getElementById('footballpitch3').style.display = "none";
document.getElementById('footballpitch4').style.display = "none";
document.getElementById('footballpitch3').style.display = "block";
}
if (style = "4-5-1") {
document.getElementById('footballpitch1').style.display = "none";
document.getElementById('footballpitch2').style.display = "none";
document.getElementById('footballpitch3').style.display = "none";
document.getElementById('footballpitch4').style.display = "none";
document.getElementById('footballpitch4').style.display = "block";
}
});
It's worth familiarising yourself with the different kinds of comparison operators:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators
Put simply, single (=), double (==) and triple (===) equals signs each mean different things to JavaScript.
A single = is an assignment operator, so in each of your if statements you're essentially asking the script to assign a value of "4-4-2" (and so on) to the variable style instead of comparing the two values.
If you use == (with type coercion) or === (no coercion) your code should work fine.
if (style == "4-4-2")
{
document.getElementById('footballpitch1').style.display = "none";
document.getElementById('footballpitch2').style.display = "none";
document.getElementById('footballpitch3').style.display = "none";
document.getElementById('footballpitch4').style.display = "none";
document.getElementById('footballpitch1').style.display = "block";
}
if (style == "3-4-3")
{
document.getElementById('footballpitch1').style.display = "none";
document.getElementById('footballpitch2').style.display = "none";
document.getElementById('footballpitch3').style.display = "none";
document.getElementById('footballpitch4').style.display = "none";
document.getElementById('footballpitch2').style.display = "block";
}
if (style == "3-5-2") {
document.getElementById('footballpitch1').style.display = "none";
document.getElementById('footballpitch2').style.display = "none";
document.getElementById('footballpitch3').style.display = "none";
document.getElementById('footballpitch4').style.display = "none";
document.getElementById('footballpitch3').style.display = "block";
}
if (style == "4-5-1") {
document.getElementById('footballpitch1').style.display = "none";
document.getElementById('footballpitch2').style.display = "none";
document.getElementById('footballpitch3').style.display = "none";
document.getElementById('footballpitch4').style.display = "none";
document.getElementById('footballpitch4').style.display = "block";
}
I have three div when I want to use checkbox should I have new div
if I check car1 while car2 unchecked should I have red car
but if check car1 while car2 checked should I have black car
<div id="carblack">
car black
</div>
<div id="carred" style="display:none">
car red
</div>
<div id="carblue" style="display:none">
car blue
</div>
<input type="checkbox" id="car1" name="vehicle" value="red" checked/>
<input type="checkbox" id="car2" name="vehicle1" value="blue" checked/>
$('#car1').change(function () {
if($(this).attr("checked")){
document.getElementById("carred").style.display = "block";
document.getElementById("carblack").style.display = "none";
} else{
document.getElementById("carblack").style.display = "block";
document.getElementById("carred").style.display = "none";
}
});
$('#car2').change(function () {
if($(this).attr("checked")){
document.getElementById("carblue").style.display = "block";
document.getElementById("carblack").style.display = "none";
} else{
document.getElementById("carblack").style.display = "block";
document.getElementById("carblue").style.display = "none";
}
});
2 radio checked or none of them - black?
$(function(){
var cars = $('div[id^="car"]'),
inputs = $('input[type="checkbox"]');
inputs.change(function(){
cars.hide();
if(inputs.filter(':checked').length === 1)
{
cars.filter('#car' + $(this).val()).show();
}
else {
cars.filter('#carblack').show();
}
});
});
Demo: http://jsfiddle.net/jAxHT/
$('#car1').change(function () {
if($(this).attr("checked")){
if($(this).next().attr("checked")){
document.getElementById("carblack").style.display = "block";
document.getElementById("carred").style.display = "none";
document.getElementById("carblue").style.display = "none";
}else{
document.getElementById("carred").style.display = "block";
document.getElementById("carblack").style.display = "none";
}
} else if($(this).next().attr("checked")){
document.getElementById("carblack").style.display = "none";
document.getElementById("carblue").style.display = "block";
}else{
document.getElementById("carblack").style.display = "block";
document.getElementById("carred").style.display = "none";
document.getElementById("carblue").style.display = "none"; }
});
$('#car2').change(function () {
if($(this).attr("checked")){
if($(this).prev().attr("checked")){
document.getElementById("carblack").style.display = "block";
document.getElementById("carred").style.display = "none";
document.getElementById("carblue").style.display = "none";
}else{
document.getElementById("carblue").style.display = "block";
document.getElementById("carblack").style.display = "none";
}
} else if($(this).prev().attr("checked")){
document.getElementById("carblack").style.display = "none";
document.getElementById("carred").style.display = "block";
}else{
document.getElementById("carblack").style.display = "block";
document.getElementById("carred").style.display = "none";
document.getElementById("carblue").style.display = "none"; }
});