I have a code of a quiz in html and js. The quiz has 10 question and there should be buttons to move between the questions.
The first question works fine but when I try to answer the second question I get this error in the console:
Game.html:1 Uncaught ReferenceError: num is not defined
at HTMLButtonElement.onclick (Game.html:1)
What can I do to prevent this error? I tried to copy the js code to the script element in html but it didn't work.
The code of the html looks like that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body id="gameBody" onload="InitGame()">
<h1>Welcome to the game</h1>
<h3 class="header">Your score</h3>
<h3 class="text" id="score"></h3>
<h5 class="header">Choose the right answer</h5>
<p class="header">The question number</p>
<p class="text" id="questionNumber"></p>
<p class="header">The word you need to translate</p>
<p id="word"></p>
<div id="image">
</div>
<div id="options">
</div>
<p id="message"></p>
<button class="myChoise" onclick="prevQuestion()">Previous</button>
<button class="myChoise" onclick="nextQuestion()">Next</button>
</body>
</html> ```
And in script.js I have this array of objects :
let food=[{
'ID':1,
'word':'What is the national dish of Italy',
'options':[
{name : 'פסטה, פיצה, ריזוטו'},
{name : 'המבורגר'},
{name : 'מרק עוף'}
],
'img':'img/200.jpg',
'rightAnswer':'פסטה, פיצה, ריזוטו',
},
{
'ID':2,
'word':'What is the national dish of the United States?',
'options':[
{name : 'המבורגר, נקנקיה בלחמניה, פאי '},
{name : 'פיצה'},
{name : 'ריזוטו'}
],
'img':'img/23.jpg',
'rightAnswer':'המבורגר, נקנקיה בלחמניה, פאי',
},
{
'ID':3,
'word':'What is the national dish of Hungary?',
'options':[
{name : 'גולאש'},
{name : 'המבורגר'},
{name : 'נקנקיה בלחמניה'}
],
'img':'img/21.jpg',
'rightAnswer':'גולאש',
},
{
'ID':4,
'word':'What is the national dish of Greece?',
'options':[
{name : 'מוסקה,סלט יווני'},
{name : 'גולאש'},
{name : 'המבורגר'}
],
'img':'img/222.jpg',
'rightAnswer':'סלט יווני,מוסקה',
},
{
'ID':5,
'word':'What is the national dish of Belarus?',
'options':[
{name : 'לביבה'},
{name : 'קציצות בשר'},
{name : 'מרק עוף'}
],
'img':'img/444.jpg',
'rightAnswer':'לביבה',
},
{
'ID':6,
'word':'What is the national dish of the United Kingdom?',
'options':[
{name : ' פיש אנד ציפס'},
{name : 'ответ'},
{name : 'название'}
],
'img':'img/20.jpg',
'rightAnswer':' פיש אנד ציפס',
},
{
'ID':7,
'word':'What is China national dish?',
'options':[
{name : 'אורז'},
{name : 'קציצות בקר'},
{name : 'המבורגר'}
],
'img':'img/486.jpg',
'rightAnswer':'אורז',
},
{
'ID':8,
'word':'What is the national dish of France?',
'options':[
{name : 'באגט, קרואסון, פואה גרא'},
{name : 'נקנקיה בלחמניה'},
{name : 'לביבות'}
],
'img':'img/22.jpg',
'rightAnswer':'באגט, קרואסון, פואה גרא',
},
{
'ID':9,
'word':'What is the national dish of Cyprus?',
'options':[
{name : 'חלומי'},
{name : 'באגט'},
{name : 'אורז'}
],
'img':'img/24.jpg',
'rightAnswer':'חלומי',
},
{
'ID':10,
'word':'What is the national dish of Mexico?',
'options':[
{name : 'טאקו, גואקמולי'},
{name : 'אורז'},
{name : 'פיש אנד ציפס'}
],
'img':'img/264.jpg',
'rightAnswer':'טאקו,גואקמולי',
}
]
And this functions :
let score = 0;
function InitGame(){
document.getElementById("questionNumber").innerHTML = food[0].ID;
document.getElementById("score").innerHTML= score;
document.getElementById("word").innerHTML= food[0].word;
let imgSrc = food[0].img;
let img = document.createElement("img");
img.src = food[0].img;
img.width = '500';
img.height = '300';
document.getElementById("image").appendChild(img);
document.getElementById("options").innerHTML =
"<button class='btn' id='1' onclick='checkAnswer(food[0].ID,this)'></button> " +
"<button class='btn' id='2' onclick='checkAnswer(food[0].ID,this)'></button> " +
"<button class='btn' id='3' onclick='checkAnswer(food[0].ID,this)'></button>";
document.getElementById("options").getElementsByTagName('button')[0].innerHTML = food[0].options[0].name;
document.getElementById("options").getElementsByTagName('button')[1].innerHTML = food[0].options[1].name;
document.getElementById("options").getElementsByTagName('button')[2].innerHTML = food[0].options[2].name;
}
function checkAnswer(questionNum,btn){
for(i in food)
{
if(food[i].ID === questionNum)
{
let chosed = btn.id;
let answer = food[i].options[chosed-1].name;
if(answer === food[i].rightAnswer)
{
score = score+1;
document.getElementById("score").innerHTML= score;
document.getElementById("message").innerHTML = "Right answer";
nextQuestion();
}
else
{
score = score-0.5;
document.getElementById("score").innerHTML= score;
document.getElementById("message").innerHTML = "wrong answer, please try again";
}
}
}
}
function nextQuestion(){
let qNum = document.getElementById("questionNumber").innerHTML;
let num = ++qNum;
if(num === 10)
{
num = 0;
}
document.getElementById("questionNumber").innerHTML = num;
document.getElementById("score").innerHTML= score;
document.getElementById("word").innerHTML= food[num].word;
document.getElementById("image").innerHTML="";
let imgSrc = food[num].img;
let img = document.createElement("img");
img.src = food[num].img;
img.width = '500';
img.height = '300';
document.getElementById("image").appendChild(img);
document.getElementById("options").innerHTML="";
document.getElementById("options").innerHTML =
"<button class='btn' id='1' onclick='checkAnswer(food[num].ID,this)'></button> " +
"<button class='btn' id='2' onclick='checkAnswer(food[num].ID,this)'></button> " +
"<button class='btn' id='3' onclick='checkAnswer(food[num].ID,this)'></button>";
document.getElementById("options").getElementsByTagName('button')[0].innerHTML = food[num].options[0].name;
document.getElementById("options").getElementsByTagName('button')[1].innerHTML = food[num].options[1].name;
document.getElementById("options").getElementsByTagName('button')[2].innerHTML = food[num].options[2].name;
}
function prevQuestion(){
let qNum = document.getElementById("questionNumber").innerHTML;
let num = --qNum;
if(num === -1)
{
num = 10;
}
document.getElementById("questionNumber").innerHTML = num;
document.getElementById("score").innerHTML= score;
document.getElementById("word").innerHTML= food[num].word;
document.getElementById("image").innerHTML="";
let imgSrc = food[num].img;
let img = document.createElement("img");
img.src = food[num].img;
img.width = '500';
img.height = '300';
document.getElementById("image").appendChild(img);
document.getElementById("options").innerHTML="";
document.getElementById("options").innerHTML =
`<button class='btn' id='1' onclick='checkAnswer(food[num].ID,this)'></button> <button class='btn' id='2' onclick='checkAnswer(food[num].ID,this)'></button> <button class='btn' id='3' onclick='checkAnswer(food[num].ID,this)'></button>`;
document.getElementById("options").getElementsByTagName('button')[0].innerHTML = food[num].options[0].name;
document.getElementById("options").getElementsByTagName('button')[1].innerHTML = food[num].options[1].name;
document.getElementById("options").getElementsByTagName('button')[2].innerHTML = food[num].options[2].name;
}
the reason you are gettting num is not defined is that you are setting the inner HTML like 'checkAnswer(food[num].ID,this)' in this case number doesn't have reference to num variable in the function instead you should use 'checkAnswer(food[" + num + "].ID,this)' so that when html renderes instead of num it will render the number like this checkAnswer(food[9].ID,this)
let food = [{
'ID': 1,
'word': 'What is the national dish of Italy',
'options': [{
name: 'פסטה, פיצה, ריזוטו'
},
{
name: 'המבורגר'
},
{
name: 'מרק עוף'
}
],
'img': 'img/200.jpg',
'rightAnswer': 'פסטה, פיצה, ריזוטו',
},
{
'ID': 2,
'word': 'What is the national dish of the United States?',
'options': [{
name: 'המבורגר, נקנקיה בלחמניה, פאי'
},
{
name: 'פיצה'
},
{
name: 'ריזוטו'
}
],
'img': 'img/23.jpg',
'rightAnswer': 'המבורגר, נקנקיה בלחמניה, פאי',
},
{
'ID': 3,
'word': 'What is the national dish of Hungary?',
'options': [{
name: 'גולאש'
},
{
name: 'המבורגר'
},
{
name: 'נקנקיה בלחמניה'
}
],
'img': 'img/21.jpg',
'rightAnswer': 'גולאש',
},
{
'ID': 4,
'word': 'What is the national dish of Greece?',
'options': [{
name: 'מוסקה,סלט יווני'
},
{
name: 'גולאש'
},
{
name: 'המבורגר'
}
],
'img': 'img/222.jpg',
'rightAnswer': 'מוסקה,סלט יווני',
},
{
'ID': 5,
'word': 'What is the national dish of Belarus?',
'options': [{
name: 'לביבה'
},
{
name: 'קציצות בשר'
},
{
name: 'מרק עוף'
}
],
'img': 'img/444.jpg',
'rightAnswer': 'לביבה',
},
{
'ID': 6,
'word': 'What is the national dish of the United Kingdom?',
'options': [{
name: ' פיש אנד ציפס'
},
{
name: 'ответ'
},
{
name: 'название'
}
],
'img': 'img/20.jpg',
'rightAnswer': ' פיש אנד ציפס',
},
{
'ID': 7,
'word': 'What is China national dish?',
'options': [{
name: 'אורז'
},
{
name: 'קציצות בקר'
},
{
name: 'המבורגר'
}
],
'img': 'img/486.jpg',
'rightAnswer': 'אורז',
},
{
'ID': 8,
'word': 'What is the national dish of France?',
'options': [{
name: 'באגט, קרואסון, פואה גרא'
},
{
name: 'נקנקיה בלחמניה'
},
{
name: 'לביבות'
}
],
'img': 'img/22.jpg',
'rightAnswer': 'באגט, קרואסון, פואה גרא',
},
{
'ID': 9,
'word': 'What is the national dish of Cyprus?',
'options': [{
name: 'חלומי'
},
{
name: 'באגט'
},
{
name: 'אורז'
}
],
'img': 'img/24.jpg',
'rightAnswer': 'חלומי',
},
{
'ID': 10,
'word': 'What is the national dish of Mexico?',
'options': [{
name: 'טאקו,גואקמולי'
},
{
name: 'אורז'
},
{
name: 'פיש אנד ציפס'
}
],
'img': 'img/264.jpg',
'rightAnswer': 'טאקו,גואקמולי',
}
]
let score = 0;
function InitGame() {
document.getElementById("questionNumber").innerHTML = food[0].ID;
document.getElementById("score").innerHTML = score;
document.getElementById("word").innerHTML = food[0].word;
let imgSrc = food[0].img;
let img = document.createElement("img");
img.src = food[0].img;
img.width = '500';
img.height = '300';
document.getElementById("image").appendChild(img);
document.getElementById("options").innerHTML =
"<button class='btn' id='1' onclick='checkAnswer(food[0].ID,this)'></button> " +
"<button class='btn' id='2' onclick='checkAnswer(food[0].ID,this)'></button> " +
"<button class='btn' id='3' onclick='checkAnswer(food[0].ID,this)'></button>";
document.getElementById("options").getElementsByTagName('button')[0].innerHTML = food[0].options[0].name;
document.getElementById("options").getElementsByTagName('button')[1].innerHTML = food[0].options[1].name;
document.getElementById("options").getElementsByTagName('button')[2].innerHTML = food[0].options[2].name;
}
function checkAnswer(questionNum, btn) {
debugger
for (i in food) {
if (food[i].ID === questionNum) {
let chosed = btn.id;
let answer = food[i].options[chosed - 1].name;
if (answer === food[i].rightAnswer) {
score = score + 1;
document.getElementById("score").innerHTML = score;
document.getElementById("message").innerHTML = "Right answer";
nextQuestion();
} else {
score = score - 0.5;
document.getElementById("score").innerHTML = score;
document.getElementById("message").innerHTML = "wrong answer, please try again";
}
}
}
}
function nextQuestion() {
let qNum = document.getElementById("questionNumber").innerHTML;
let num = ++qNum;
if (num === 10) {
num = 0;
}
document.getElementById("questionNumber").innerHTML = num;
document.getElementById("score").innerHTML = score;
document.getElementById("word").innerHTML = food[num].word;
document.getElementById("image").innerHTML = "";
let imgSrc = food[num].img;
let img = document.createElement("img");
img.src = food[num].img;
img.width = '500';
img.height = '300';
document.getElementById("image").appendChild(img);
document.getElementById("options").innerHTML = "";
document.getElementById("options").innerHTML =
"<button class='btn' id='1' onclick='checkAnswer(food[" + num + "].ID,this)'></button> " +
"<button class='btn' id='2' onclick='checkAnswer(food[" + num + "].ID,this)'></button> " +
"<button class='btn' id='3' onclick='checkAnswer(food[" + num + "].ID,this)'></button>";
document.getElementById("options").getElementsByTagName('button')[0].innerHTML = food[num].options[0].name;
document.getElementById("options").getElementsByTagName('button')[1].innerHTML = food[num].options[1].name;
document.getElementById("options").getElementsByTagName('button')[2].innerHTML = food[num].options[2].name;
debugger;
}
function prevQuestion() {
let qNum = document.getElementById("questionNumber").innerHTML;
let num = --qNum;
if (num === -1) {
num = 10;
}
document.getElementById("questionNumber").innerHTML = num;
document.getElementById("score").innerHTML = score;
document.getElementById("word").innerHTML = food[num].word;
document.getElementById("image").innerHTML = "";
let imgSrc = food[num].img;
let img = document.createElement("img");
img.src = food[num].img;
img.width = '500';
img.height = '300';
document.getElementById("image").appendChild(img);
document.getElementById("options").innerHTML = "";
document.getElementById("options").innerHTML =
`<button class='btn' id='1' onclick='checkAnswer(food[` + num + `].ID,this)'></button> <button class='btn' id='2' onclick='checkAnswer(food[` + num + `].ID,this)'></button> <button class='btn' id='3' onclick='checkAnswer(food[` + num + `].ID,this)'></button>`;
document.getElementById("options").getElementsByTagName('button')[0].innerHTML = food[num].options[0].name;
document.getElementById("options").getElementsByTagName('button')[1].innerHTML = food[num].options[1].name;
document.getElementById("options").getElementsByTagName('button')[2].innerHTML = food[num].options[2].name;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
</head>
<body id="gameBody" onload="InitGame()">
<h1>Welcome to the game</h1>
<h3 class="header">Your score</h3>
<h3 class="text" id="score"></h3>
<h5 class="header">Choose the right answer</h5>
<p class="header">The question number</p>
<p class="text" id="questionNumber"></p>
<p class="header">The word you need to translate</p>
<p id="word"></p>
<div id="image">
</div>
<div id="options">
</div>
<p id="message"></p>
<button class="myChoise" onclick="prevQuestion()">Previous</button>
<button class="myChoise" onclick="nextQuestion()">Next</button>
</body>
</html>
Related
I want a user to be able to put his info about their book and push it into the library. I can do this when it comes to display but I want to have it saved as a new object in javascript. A new array 'newBooks' that I created don't return a new value, it stays the same even though I used spread operator which is supposed to change the value. Could someone tell me what's going on?
const booksContainer = document.querySelector('.booksContainer');
const buttonNewBook = document.querySelector('.buttonNewBook');
const buttonConfirm = document.querySelector('.confirmBook')
const inputContainer = document.querySelector('.addNewBook');
buttonNewBook.addEventListener('click', () => {
if (inputContainer.style.display === 'none') {
inputContainer.style.display = 'flex'
} else {
inputContainer.style.display = 'none'
}
if (buttonConfirm.style.display === 'none') {
buttonConfirm.style.display = 'inline'
} else {
buttonConfirm.style.display = 'none'
}
});
const books = [
{
id: 1,
imageUrl: '',
title: 'Title:',
author: 'Author:',
pages: 'Pages:'
},
{
id: 5, imageUrl: '',
id: 6, title: 'Title:',
id: 7, author: 'Author:',
id: 8, pages: 'Pages:'
},
{
id: 9, imageUrl: '',
id: 10, title: 'Title:',
id: 11, author: 'Author:',
id: 12, pages: 'Pages:'
},
{
id: 13, imageUrl: '',
id: 14, title: 'Title:',
id: 15, author: 'Author:',
id: 16, pages: 'Pages:'
}
]
books.forEach((book, index) => {
let booksDisplay = document.createElement('div')
booksDisplay.setAttribute('class', 'booksDisplay')
booksContainer.appendChild(booksDisplay)
let booksDisplayImage = document.createElement('img');
booksDisplayImage.src = (`${book.imageUrl}`)
booksDisplayImage.setAttribute('class', 'booksImage');
booksDisplay.appendChild(booksDisplayImage);
let imageContainer = document.createElement('div')
imageContainer.setAttribute('class', 'imageContainer');
booksDisplay.appendChild(imageContainer);
imageContainer.appendChild(booksDisplayImage)
let booksDisplayTextTitle = document.createElement('p');
booksDisplayTextTitle.setAttribute('class', 'titleText')
let booksDisplayTextAuthor = document.createElement('p');
booksDisplayTextAuthor.setAttribute('class', 'authorText')
let booksDisplayTextPages = document.createElement('p');
booksDisplayTextPages.setAttribute('class', 'pagesText')
let booksDisplayTextDisplayTitle = document.createTextNode(`${book.title}`);
booksDisplayTextTitle.appendChild(booksDisplayTextDisplayTitle);
let booksDisplayTextDisplayAuthor = document.createTextNode(`${book.author}`);
booksDisplayTextAuthor.appendChild(booksDisplayTextDisplayAuthor)
let booksDisplayTextDisplayPages = document.createTextNode(`${book.pages}`);
booksDisplayTextPages.appendChild(booksDisplayTextDisplayPages);
let textContainer = document.createElement('div');
textContainer.setAttribute('class', 'textContainer');
booksDisplay.appendChild(textContainer);
textContainer.appendChild(booksDisplayTextTitle);
textContainer.appendChild(booksDisplayTextAuthor);
textContainer.appendChild(booksDisplayTextPages);
booksContainer.appendChild(booksDisplay);
let buttonRead = document.createElement('button')
let buttonRemove = document.createElement('button');
buttonRemove.addEventListener('click', () => {
booksDisplayTextTitle.textContent = 'Title:';
booksDisplayTextAuthor.textContent = 'Author:';
booksDisplayTextPages.textContent = 'Pages:';
booksDisplayImage.style.display = 'none';
imageContainer.style.border = '1px solid rgb(107, 107, 107)'
});
let buttonReadText = document.createTextNode ('I have read this book');
let buttonRemoveText = document.createTextNode ('Remove a book');
buttonRead.appendChild(buttonReadText);
buttonRemove.appendChild(buttonRemoveText);
textContainer.appendChild(buttonRead)
textContainer.appendChild(buttonRemove)
});
const inputTitle = document.querySelector('#title');
const inputAuthor = document.querySelector('#author')
const inputPages = document.querySelector('#pages')
const inputImageUrl = document.querySelector('#imageUrl')
inputImageUrl.value = '';
inputTitle.value = '';
inputAuthor.value = '';
inputPages.value = '';
const titleText = document.querySelector('.titleText');
const authorText = document.querySelector('.authorText');
const pagesText = document.querySelector('.pagesText');
const bookImageUrl = document.querySelector('.booksImage');
console.log(inputTitle)
buttonConfirm.addEventListener('click', () => {
bookImageUrl.src = inputImageUrl.value;
titleText.textContent = 'Title:' + ' ' + inputTitle.value;
authorText.textContent = 'Author:' + ' ' + inputAuthor.value;
pagesText.textContent = 'Pages:' + ' ' + inputPages.value;
const newBooks = books.map(newBook => {
if (newBook.id == 1) {
return {...newBook, author: inputAuthor.value, title: inputTitle.value, pages: inputPages.value}
}
return newBook;
});
console.log(newBooks)
});
console.log(books)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/style.css">
<title>Document</title>
</head>
<body>
<div class="myLibrary">
<form class="addNewBook">
<input type="text" name="titles" id="title" placeholder="Title">
<input type="text" name="author" id="author" placeholder="Author">
<input type="number" name="pages" id="pages" placeholder="Number of pages">
<input type="link" name="imageUrl" id="imageUrl" placeholder="Image URL">
</form>
<div class="buttonContainer">
<button class="buttonNewBook">Add a new book</button>
<button class="confirmBook">Confirm</button>
</div>
<div class="booksContainer">
</div>
<script src="./scripts/script.js"></script>
</body>
</html>
Your book is wrong formated
let info = {
id: 1, imageUrl: '',
id: 2, title: 'Title:',
id: 3, author: 'Author:',
id: 4, pages: 'Pages:'
}
console.log( info )
is the same as
let info = {}
info.id = 1
info.id = 2
info.id = 3
info.id = 4
info.title = ....
there could be only one info.id propertie
I lost time understanding the purpose of your code, but I suggest you get inspired by this way of coding...
const
newBookForm = document.forms['add-New-Book']
, books =
[ { id: 1, imageUrl: '', title: 'Title-1', author: 'Author:', pages: 'Pages:' }
, { id: 2, imageUrl: '', title: 'Title-2', author: 'Author:', pages: 'Pages:' }
, { id: 3, imageUrl: '', title: 'Title-3', author: 'Author:', pages: 'Pages:' }
, { id: 4, imageUrl: '', title: 'Title-4', author: 'Author:', pages: 'Pages:' }
]
, booksContainer = document.querySelector('.booksContainer')
, newBook = { id: books.reduce((r,{id})=>Math.max(r,id),0) }
;
function displayNewBook(book)
{
let booksDisplay = document.createElement('div')
booksDisplay.className = 'booksDisplay'
booksDisplay.innerHTML = `
<div class="imageContainer">
<img src="${book.imageUrl}" class="booksImage" >
</div>
<div class="textContainer">
<p class"titleText">${book.title}</p>
<p class"authorText">${book.author}</p>
<p class"pagesText">${book.pages}</p>
<button data-op="readed" data-ref="${book.id}"> I have read this book</button>
<button data-op="remove" data-ref="${book.id}"> Remove this book</button>
</div>`
booksContainer.appendChild(booksDisplay)
}
books.forEach( displayNewBook )
;
newBookForm.onsubmit = e => e.preventDefault() // disable form submit for no page relaoding
;
newBookForm.onclick = ({target: bt }) =>
{
if (!bt.matches('button')) return;
let addBook = (bt.name==='btAdd')
if ( addBook && !newBookForm.checkValidity() )
{
newBookForm.reportValidity()
return
}
newBookForm.btAdd .classList.toggle('noDisplay', addBook )
newBookForm.btConfirm.classList.toggle('noDisplay', !addBook )
newBookForm.btCancel .classList.toggle('noDisplay', !addBook )
newBookForm.titles .readOnly = addBook
newBookForm.author .readOnly = addBook
newBookForm.pages .readOnly = addBook
newBookForm.imageUrl.readOnly = addBook
if (bt.name==='btConfirm')
{
let book =
{ id : ++newBook.id
, imageUrl : newBookForm.imageUrl.value
, title : newBookForm.titles.value
, author : newBookForm.author.value
, pages : newBookForm.pages.value
}
books.push( book )
displayNewBook( book )
newBookForm.reset()
console.clear()
console.log ( 'books:\n' + JSON.stringify(books).replaceAll('},{','}\n,{') )
}
}
booksContainer.onclick = ({target: target_Bt}) =>
{
if (!target_Bt.matches('button[data-op]')) return
// console.clear()
// console.log( target_Bt.dataset.op, target_Bt.dataset.ref )
if (target_Bt.dataset.op==='readed')
{
// things to do with target_Bt.dataset.ref
}
if (target_Bt.dataset.op==='remove')
{
// things to do with target_Bt.dataset.ref
// let idx = books.findIndex(({id})=>id=== +target_Bt.dataset.ref)
target_Bt
.closest('div.booksDisplay')
.querySelector('div.imageContainer')
.classList.add('BookRemove');
}
}
.booksContainer {
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
}
.imageContainer {
width : 80px;
height : 30px;
background : aquamarine;
}
.textContainer button {
margin : 0 0 2.4em 1em;
}
.imageContainer.BookRemove {
border : 1px solid rgb(107, 107, 107);
}
.noDisplay {
display: none;
}
form[name="add-New-Book"] {
margin-bottom : 2em;
width : 20em;
}
form input {
margin-bottom : .4em;
width : 19em;
}
form fieldset {
padding-bottom : 0;
margin-bottom : .4em;
}
form[name="add-New-Book"] input:read-only {
background-color: lightblue;
}
button[name="btConfirm"] {
width : 10em;
background-color : #7bff00;
border-radius : 4px;
}
button[name="btCancel"] {
width : 5em;
background-color : #ebb222;
border-radius : 4px;
}
.as-console-row::after {display: none !important;}
.as-console-row-code {background: yellow;}
<form name="add-New-Book">
<fieldset>
<legend> new Book </legend>
<input type="text" name="titles" placeholder="Title" required>
<input type="text" name="author" placeholder="Author" required>
<input type="number" name="pages" placeholder="Number of pages" required min="0">
<input type="link" name="imageUrl" placeholder="Image URL" required>
</fieldset>
<button type="button" name="btAdd"> Add a new book </button>
<button type="button" name="btConfirm" class="noDisplay"> Confirm </button>
<button type="button" name="btCancel" class="noDisplay"> Cancel </button>
<button type="reset">reset</button>
</form>
<div class="booksContainer">
Okay, I figured it out. It seems like I have to add an ID to the whole object(It was 4 before and I changed it to ID: 1. Then I added return {...newBook, author: inputAuthor.value, title: inputTitle.value, pages: inputPages.value} in a new array.
I am new to javaScript
here in this code, I'm trying to add companyDetails(nested object of productDetails) in the table by its id.
Like, for id 1 I want to add companyDetails then in the input field of id enter id 1 and insert details in the given input fields
so my problem is that companyDetails(date,address,companyName)is not displayed in the table after adding its value for entered id
let productDetails = [
{
id: "1",
partNo: "10",
productName: "bag",
size: "30",
color: ["Blue"],
description: "sky bags ",
},
{
id: "2",
partNo: "15",
productName: "bottle",
size: "10",
color: ["Green", "Orange"],
description: "plastic and still",
},
{
id: "4",
partNo: "20",
productName: "lunchbox",
size: "20",
color: ["Blue", "Red"],
description: "fresh food",
},
{
id: "3",
partNo: "40",
productName: "pen",
size: "10",
color: ["Red", "Blue"],
description: "gel pen ",
}, {
id: "5",
partNo: "35",
productName: "notebook",
size: "30",
color: ["Blue", "Red", "Orange"],
description: "Writing",
}
]
/** * function to add company details */
function addCompanyDetails() {
let data = (document.getElementById('productId').value);
let date1 = document.getElementById('date').value;
let Caddress = document.getElementById('address').value;
let Cname = (document.getElementById('companyName').value);
if (data === '') {
message("enter id for search");
}
for (let i = 0; i < productDetails.length; i++) {
let companyDetails = productDetails[i].companyDetails ? productDetails[i].companyDetails : { date: "", address: "", companyName: "" };
let p = companyDetails;
if ((productDetails[i].id) == (data)) {
p.companyName = Cname ;
p.date = date1 ;
p.address = Caddress;
console.log(p.companyName);
console.log(p.date);
console.log(p.address);
}
displayData();
clearInputData();
}
}
/** * this function display the data in table */
function displayData() {
objectArray = Object.values(productDetails);
display(objectArray, clearInputData);
}
/** * this function is for get the value from form */
function getValue() {
let id = document.getElementById('productId').value;
let date = document.getElementById('date').value;
let address = document.getElementById('address').value;
let companyName = document.getElementById('companyName').value;
return { id, date, address, companyName };
}
/** * Function is to display the data in table */
function display(productStore, callBack) {
messageTable(" ");
let data = productDetails;
let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><th colspan=7 >company Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th><th>weight</th><th>Date</th><th>Address</th><th>Company name</th></tr>";
for (let i = 0; i < data.length; i++) {
if (data[i].productWeight === undefined) {
data[i].productWeight = " ";
} else { }
if (data[i].date === undefined) {
data[i].date = " ";
} else { }
if (data[i].address === undefined) {
data[i].address = " ";
} else { }
let companyDetails = data[i].companyDetails ? data[i].companyDetails : { date: "", address: "", companyName: "" };
table += "<tr><td>" + data[i].id + "</td>";
table += "<td>" + data[i].partNo + "</td>";
table += "<td>" + data[i].productName + "</td>";
table += "<td>" + data[i].size + "</td>";
table += "<td>" + data[i].color + "</td>";
table += "<td>" + data[i].description + "</td>";
table += "<td>" + data[i].productWeight + "</td>";
table += "<td>" + companyDetails.date + "</td>";
table += "<td>" + companyDetails.address + "</td>";
table += "<td>" + companyDetails.companyName + "</td>";
}
messageTable(table);
clearInputData();
}
/** * function is to print the table */
function messageTable(data) {
document.getElementById("messageTableA").innerHTML = data;
}
/** * this function is to clear the data */
function clearInputData() {
document.getElementById("productId").value = "";
document.getElementById("address").value = "";
document.getElementById("date").value = "";
document.getElementById("companyName").value = "";
}
<!DOCTYPE html>
<html>
<head>
<script src="add.js"></script>
<style>
th,
td,
p,
input {
font-family: Arial, Helvetica, sans-serif;
}
table,
th,
td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 10px 10px;
text-align: center;
}
th {
font-weight: bold;
}
</style>
</head>
<body onload="display()">
<h2>Product Details:</h2>
<form action="">
<label for="id">Id: </label> <input type="number" id="productId" required> <input type="button"
value="autofill" onclick="auto()"><br><br>
<label for="EstablishDate">Establish Date:</label> <input type="date" id="date" required><br><br>
<label for="address">Address:</label><br><br> <textarea name="address" id="address" cols="30"
rows="10"></textarea><br><br>
<label for="CompanyName">Company Name:</label> <input type="text" id="companyName" required><br><br>
<input type="button" value="add company details" onclick="addCompanyDetails()"><br><br>
<p id="result"></p>
<p id="demo"></p>
<p id="messageTableA"></p>
</form>
</body>
</html>
Here I am adding the Information of company with Specific ID to its respectice Product id
like productDetails[i].address = Caddress; in addCompanyDetails() function and then
in display function I have replaced companyDetails.address to data[i].address .
But be sure it will lose its data when you reload the page .
let productDetails = [
{
id: "1",
partNo: "10",
productName: "bag",
size: "30",
color: ["Blue"],
description: "sky bags ",
},
{
id: "2",
partNo: "15",
productName: "bottle",
size: "10",
color: ["Green", "Orange"],
description: "plastic and still",
},
{
id: "4",
partNo: "20",
productName: "lunchbox",
size: "20",
color: ["Blue", "Red"],
description: "fresh food",
},
{
id: "3",
partNo: "40",
productName: "pen",
size: "10",
color: ["Red", "Blue"],
description: "gel pen ",
}, {
id: "5",
partNo: "35",
productName: "notebook",
size: "30",
color: ["Blue", "Red", "Orange"],
description: "Writing",
}
]
/** * function to add company details */
function addCompanyDetails() {
let data = (document.getElementById('productId').value);
let date1 = document.getElementById('date').value;
let Caddress = document.getElementById('address').value;
let Cname = (document.getElementById('companyName').value);
if (data === '') {
message("enter id for search");
}
for (let i = 0; i < productDetails.length; i++) {
let companyDetails = productDetails[i].companyDetails ? productDetails[i].companyDetails : { date: "", address: "", companyName: "" };
let p = companyDetails;
if ((productDetails[i].id) == (data)) {
p.companyName = Cname ;
productDetails[i].date = date1 ;
productDetails[i].address = Caddress;
productDetails[i].companyName=Cname;
}
displayData();
clearInputData();
}
}
/** * this function display the data in table */
function displayData(companyDetails) {
objectArray = Object.values(productDetails);
display(objectArray, companyDetails,clearInputData);
}
/** * this function is for get the value from form */
function getValue() {
let id = document.getElementById('productId').value;
let date = document.getElementById('date').value;
let address = document.getElementById('address').value;
let companyName = document.getElementById('companyName').value;
return { id, date, address, companyName };
}
/** * Function is to display the data in table */
function display(productStore,callBack) {
messageTable(" ");
let data = productDetails;
let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><th colspan=7 >company Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th><th>weight</th><th>Date</th><th>Address</th><th>Company name</th></tr>";
for (let i = 0; i < data.length; i++) {
if (data[i].productWeight === undefined) {
data[i].productWeight = " ";
} else { }
if (data[i].companyName === undefined) {
data[i].companyName = " ";
} else { }
if (data[i].date === undefined) {
data[i].date = " ";
} else { }
if (data[i].address === undefined) {
data[i].address = " ";
} else { }
table += "<tr><td>" + data[i].id + "</td>";
table += "<td>" + data[i].partNo + "</td>";
table += "<td>" + data[i].productName + "</td>";
table += "<td>" + data[i].size + "</td>";
table += "<td>" + data[i].color + "</td>";
table += "<td>" + data[i].description + "</td>";
table += "<td>" + data[i].productWeight + "</td>";
table += "<td>" + data[i].date + "</td>";
table += "<td>" + data[i].address + "</td>";
table += "<td>" + data[i].companyName + "</td>";
}
messageTable(table);
clearInputData();
}
/** * function is to print the table */
function messageTable(data) {
document.getElementById("messageTableA").innerHTML = data;
}
/** * this function is to clear the data */
function clearInputData() {
document.getElementById("productId").value = "";
document.getElementById("address").value = "";
document.getElementById("date").value = "";
document.getElementById("companyName").value = "";
}
<!DOCTYPE html>
<html>
<head>
<script src="home.js"></script>
<style>
th,
td,
p,
input {
font-family: Arial, Helvetica, sans-serif;
}
table,
th,
td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 10px 10px;
text-align: center;
}
th {
font-weight: bold;
}
</style>
</head>
<body onload="display()">
<h2>Product Details:</h2>
<form action="">
<label for="id">Id: </label> <input type="number" id="productId" required> <input type="button"
value="autofill" onclick="auto()"><br><br>
<label for="EstablishDate">Establish Date:</label> <input type="date" id="date" required><br><br>
<label for="address">Address:</label><br><br> <textarea name="address" id="address" cols="30"
rows="10"></textarea><br><br>
<label for="CompanyName">Company Name:</label> <input type="text" id="companyName" required><br><br>
<input type="button" value="add company details" onclick="addCompanyDetails()"><br><br>
<p id="result"></p>
<p id="demo"></p>
<p id="messageTableA"></p>
</form>
</body>
</html>
getObjById takes in an array of objects and the id you are looking for and returns the object that has your requested id in the given array
//if the id requested does not exist in the array you gave, it returns undefined
function getObjById(arr,id){return arr.filter(a=>a.id==id)[0]}
//example usage(valid/existing id)
console.log(getObjById(productDetails,"1"))
//example usage(invalid/non-existing id)
console.log(getObjById(productDetails,"99"))
//because I have == and not === 1=="1"
console.log(getObjById(productDetails,1))
<script>
//just where I have the array to save line space for the function
let productDetails = [
{
id: "1",
partNo: "10",
productName: "bag",
size: "30",
color: ["Blue"],
description: "sky bags ",
},
{
id: "2",
partNo: "15",
productName: "bottle",
size: "10",
color: ["Green", "Orange"],
description: "plastic and still",
},
{
id: "4",
partNo: "20",
productName: "lunchbox",
size: "20",
color: ["Blue", "Red"],
description: "fresh food",
},
{
id: "3",
partNo: "40",
productName: "pen",
size: "10",
color: ["Red", "Blue"],
description: "gel pen ",
}, {
id: "5",
partNo: "35",
productName: "notebook",
size: "30",
color: ["Blue", "Red", "Orange"],
description: "Writing",
}
]
</script>
let productDetails = [
{
id: "1",
partNo: "10",
productName: "bag",
size: "30",
color: ["Blue"],
description: "sky bags ",
},
{
id: "2",
partNo: "15",
productName: "bottle",
size: "10",
color: ["Green", "Orange"],
description: "plastic and still",
},
{
id: "4",
partNo: "20",
productName: "lunchbox",
size: "20",
color: ["Blue", "Red"],
description: "fresh food",
},
{
id: "3",
partNo: "40",
productName: "pen",
size: "10",
color: ["Red", "Blue"],
description: "gel pen ",
}, {
id: "5",
partNo: "35",
productName: "notebook",
size: "30",
color: ["Blue", "Red", "Orange"],
description: "Writing",
}
]
/** * function to add company details */
function addCompanyDetails() {
let data = (document.getElementById('productId').value);
let Name = (document.getElementById('companyName').value);
let Cdate = (document.getElementById('date').value);
let Caddress = (document.getElementById('address').value);
if (data === '') {
message("enter id for search");
}
for (let i = 0; i < productDetails.length; i++) {
if ((productDetails[i].id) == (data)) {
productDetails[i].companyDetails = {
date: "",
companyName: "",
address: ""
}
productDetails[i].companyDetails.companyName = Name;
productDetails[i].companyDetails.date = Cdate;
productDetails[i].companyDetails.address = Caddress;
console.log(productDetails[i].companyDetails.companyName);
}
displayData();
clearInputData();
}
}
/** * this function display the data in table */
function displayData() {
objectArray = Object.values(productDetails);
display(objectArray, clearInputData);
}
/** * this function is for get the value from form */
function getValue() {
let id = document.getElementById('productId').value;
let date = document.getElementById('date').value;
let address = document.getElementById('address').value;
let companyName = document.getElementById('companyName').value;
return { id, date, address, companyName };
}
/** * Function is to display the data in table */
function display(productStore, callBack) {
messageTable(" ");
let data = productDetails;
let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><th colspan=7 >company Details</th><tr><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th><th>weight</th><th>Date</th><th>Address</th><th>Company name</th></tr>";
for (let i = 0; i < data.length; i++) {
if (data[i].productWeight === undefined) {
data[i].productWeight = " ";
} else { }
if (data[i].date === undefined) {
data[i].date = " ";
} else { }
if (data[i].address === undefined) {
data[i].address = " ";
} else { }
let companyDetails = data[i].companyDetails ? data[i].companyDetails : { date: "", address: "", companyName: "" };
table += "<tr><td>" + data[i].id + "</td>";
table += "<td>" + data[i].partNo + "</td>";
table += "<td>" + data[i].productName + "</td>";
table += "<td>" + data[i].size + "</td>";
table += "<td>" + data[i].color + "</td>";
table += "<td>" + data[i].description + "</td>";
table += "<td>" + data[i].productWeight + "</td>";
table += "<td>" + companyDetails.date + "</td>";
table += "<td>" + companyDetails.address + "</td>";
table += "<td>" + companyDetails.companyName + "</td>";
}
messageTable(table);
clearInputData();
}
/** * function is to print the table */
function messageTable(data) {
document.getElementById("messageTableA").innerHTML = data;
}
/** * this function is to clear the data */
function clearInputData() {
document.getElementById("productId").value = "";
document.getElementById("address").value = "";
document.getElementById("date").value = "";
document.getElementById("companyName").value = "";
}
<!DOCTYPE html>
<html>
<head>
<script src="add.js"></script>
<style>
th,
td,
p,
input {
font-family: Arial, Helvetica, sans-serif;
}
table,
th,
td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 10px 10px;
text-align: center;
}
th {
font-weight: bold;
}
</style>
</head>
<body onload="display()">
<h2>Product Details:</h2>
<form action="">
<label for="id">Id: </label> <input type="number" id="productId" required> <input type="button"
value="autofill" onclick="auto()"><br><br>
<label for="EstablishDate">Establish Date:</label> <input type="date" id="date" required><br><br>
<label for="address">Address:</label><br><br> <textarea name="address" id="address" cols="30"
rows="10"></textarea><br><br>
<label for="CompanyName">Company Name:</label> <input type="text" id="companyName" required><br><br>
<input type="button" value="add company details" onclick="addCompanyDetails()"><br><br>
<p id="result"></p>
<p id="demo"></p>
<p id="messageTableA"></p>
</form>
</body>
</html>
now its completely working without removing nested object
I'm trying to make a quiz app using JavaScript and jQuery, if I click on a radio button am setting an attribute as checked but if I move on to another question and click on any radio button there in the previous question radio button selects get removed how can I make sure that it is selected even if I move on to any question and select options there. I guess its happening because I have common name on the radio button Can someone help me out?
$(document).ready(function() {
$(function() {
var data = [{
"id": 1,
"question": "Which framework is best?",
"options": ["ReactJs", "AngularJs", "Vue.js", "Backbone"],
"correctanswer": "ReactJs",
"selectedanswer": ""
},
{
"id": 2,
"question": "What does MVC stands for?",
"options": ["Model View Controller", "Model view view Controller", "Model Controller view", "None of the above"],
"correctanswer": "Model View Controller",
"selectedanswer": ""
},
{
"id": 3,
"question": "Which is the best MOOC course website?",
"options": ["Coursera", "EDX", "Udacity", "Code School"],
"correctanswer": "Udacity",
"selectedanswer": ""
},
{
"id": 4,
"question": "which backend framework is not available in any of the MOOC site?",
"options": ["Ruby on Rails", "Node JS", "Metor Js", "Django"],
"correctanswer": "Django",
"selectedanswer": ""
},
{
"id": 5,
"question": "Which frontend framework is not available?",
"options": ["AngularJs", "ReactJs", "Backbone", "Knockout"],
"correctanswer": "ReactJs",
"selectedanswer": ""
}
];
var constructordata = function(data) {
this.id = data.id,
this.question = data.question,
this.options = data.options,
this.correctanswer = data.correctanswer,
this.selectedanswer = data.selectedanswer
};
var datas = [];
data.forEach(function(item) {
datas.push(new constructordata(item));
});
var controller = {
nextquestion: function() {
var currentelement = $('#app .questionsection.visible');
var nextelement = currentelement.next();
if (nextelement.hasClass('questionsection')) {
currentelement.removeClass('visible');
nextelement.addClass('visible');
}
if (!nextelement.next().hasClass('questionsection')) {
$("button").addClass('visible');
}
},
previousquestion: function() {
var currentelement = $('#app .questionsection.visible');
var previouselement = currentelement.prev();
if (previouselement.hasClass('questionsection')) {
currentelement.removeClass('visible');
previouselement.addClass('visible');
}
},
selectanswers: function(temp) {
for (var i = 0; i < datas.length; i++) {
if (datas[i].id == temp) {
datas[i].selectedanswer = $('input[name=optradio]:checked').val();
}
}
},
checkanswers: function() {
var score = 0;
datas.forEach(function(item) {
if (item.selectedanswer == item.correctanswer) {
score++;
}
});
console.log(score);
},
init: function() {
view.init();
}
};
var view = {
init: function() {
this.maintemplate = $("#app");
this.nextarrow = $("#next");
this.submit = $("button");
this.submit.on('click', function() {
controller.checkanswers();
})
this.nextarrow.on('click', function() {
controller.nextquestion();
});
this.previousarrow = $("#previous");
this.previousarrow.on('click', function() {
controller.previousquestion();
});
this.render();
},
render: function() {
var maintemplate = this.maintemplate;
for (var i = 0; i < datas.length; i++) {
maintemplate.append("<div class='questionsection'><p>" + datas[i].question + "</p></div>");
for (var j = 0; j < datas[i].options.length; j++) {
var options = "<div class='radio'><label><input type='radio' name='optradio' questionno=" + datas[i].id + " value=" + datas[i].options[j] + ">" + datas[i].options[j] + "</label></div>"
maintemplate.children('.questionsection').last().append(options);
}
}
maintemplate.children().first().addClass('visible');
var radio = $("input[name=optradio]");
radio.on('click', function() {
var temp = $(this).attr("questionno");
controller.selectanswers(temp);
$(this).attr("checked", "checked");
});
}
};
controller.init();
});
});
.questionsection {
display: none;
}
.btn {
display: none;
}
.visible {
display: block;
}
i.fa {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2">
<i id="previous" class="fa fa-arrow-left" aria-hidden="true"></i>
</div>
<div id="app" class="col-md-8">
</div>
<div class="col-md-2">
<i id="next" class="fa fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
<button class="btn">Submit</button>
</div>
CodePen http://codepen.io/kannant14/pen/peLOXG
One way to solve it is to name your radiobuttons in the render function with a question index like:
var options="<div class='radio'><label><input type='radio' name='optradio"+i+"' questionno="+datas[i].id+" value="+datas[i].options[j]+">"+datas[i].options[j]+"</label></div>"
and the same in the selectanswers function:
selectanswers:function(temp) {
for(var i=0;i<datas.length;i++) {
if(datas[i].id==temp){
datas[i].selectedanswer=$('input[name=optradio'+i+']:checked').val();
}
}
}
then you just need to keep track of the question index when checking the correct answers.
The following code is used to display a chart. The problem is the "data" is hard coded in. How can I change this so that the chart displays values which are displayed using:
<div id="name"> </div>
<div id="testscore"></div>
The above 2 div's contain dynamic values. I want to display these values in the chart.
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
// title:{
// text: "Olympic Medals of all Times (till 2012 Olympics)"
// },
animationEnabled: true,
legend: {
cursor:"pointer",
itemclick : function(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
},
axisY: {
title: "Time"
},
toolTip: {
shared: true,
content: function(e){
var str = '';
var total = 0 ;
var str3;
var str2 ;
for (var i = 0; i < e.entries.length; i++){
var str1 = "<span style= 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: <strong>"+ e.entries[i].dataPoint.y + "</strong> <br/>" ;
total = e.entries[i].dataPoint.y + total;
str = str.concat(str1);
}
str2 = "<span style = 'color:DodgerBlue; '><strong>"+e.entries[0].dataPoint.label + "</strong></span><br/>";
str3 = "<span style = 'color:Tomato '>Total: </span><strong>" + total + "</strong><br/>";
return (str2.concat(str)).concat(str3);
}
},
data: [
{
type: "bar",
showInLegend: true,
name: "Black",
color: "#000000",
dataPoints: [
{ y: 0.18, label: "Name"},
{ y: 0.12, label: "Name 1"},
{ y: 0.59, label: "Name 2"},
{ y: 1.15, label: "Name 3"},
]
},
]
});
chart.render();
}
</script>
You can simply call
var data = document.getElementById('name').value;
var data2 = document.getElementById('testscore').value;
If it's a single value, it would work; otherwise, you need to do it this way:
var array = $('#your.id').data('stuff');
Here, "stuff" is nothing but
<div data-stuff="some data" ></div>
Or, create an array by:
var array = new Array();
and finally, store the data into the array.
I have taken about 6 runs at this and while I can get many PARTS of it working, I can't seem to get everything functioning like I want it to. This is the latest attempt. This was originally written with just JavaScript but as an exercise I am trying to change it to AngularJS.
Template normal.html:
<section id="container" class="container panels-backface-invisible" >
<div id="carousel" class="panels-backface-invisible 3rows">
<figure ng-repeat="movie in movies.data | filterMultiple:{genres:genList,wildcard:wcSearch}" class="folder figure"
style="transform: {{carousel.rotateFn}}({{carousel.theta*$index}}deg) translateZ({{carousel.radius}}px);" >
</figure></div>
</section>
<div class="searchbox"><label>Wildcard Title Search</label><input type="text" style="width: 100px;" ng-model="wcSearch">
</div>
<div style="display: inline-block;
position: absolute;
right: 8%;
bottom: 1px;
width: 15%;"
multi-select
input-model="genreList"
button-label="name"
item-label="icon"
tick-property="ticked"
selection-mode="multiple"
helper-elements=""
on-open="msOpen( data )"
on-close="msClose( data )"
on-item-click="msClick( data )"
>
</div>
app.js:
angular.module('MovieCarousel', ['ui.router','multi-select'])
.config(function config($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider.state("index",{
url:"",
controller:"MovieFlowCtrl",
templateUrl:"templates/normal.html",
resolve:{
movieData: function($http){
var promise = $http.get('moviedata.php').
success(function(data) {
var mData={};
mData.count = data.length*2;
mData.data = data;
return mData;
});
return promise;
}
}
})
$stateProvider.state("new",{
url:"/New",
controller:"MovieFlowCtrl",
templateUrl:"templates/New.html",
resolve:{
movieData: function($http){
var promise = $http.get('moviedata.php?type=N').
success(function(data) {
var mData={};
mData.count = data.length*2;
mData.data = data;
return mData;
});
return promise;
}
}
})
})
.controller('MovieFlowCtrl', function ($scope, $rootScope, movieData, $filter) {
$scope.carousel = {};
$scope.carousel.isHorizontal = true;
$scope.movies = movieData;
$scope.carousel.element = document.getElementById('carousel');
setTimeout( function(){
document.body.addClassName('ready');
}, 0);
$scope.clearSelection=function() {
$rootScope.genrefilter = [];
$('#selectable .ui-selected').removeClass('ui-selected');
}
$rootScope.genrefilter = [];
$scope.msClick = function(Data) {
console.log(Data);
var selectedind = $rootScope.genrefilter.indexOf(Data.name);
if(selectedind>=0){
$rootScope.genrefilter.splice(selectedind,1);
}
else{
$rootScope.genrefilter.push(Data.name);
}
$scope.carousel.filter();
// $filter('filterMultiple');
}
$rootScope.genreList = [
{ icon: "<img src=/img/Action.png />", name: "Action", ticked: false },
{ icon: "<img src=/img/Adventure.png>", name: "Adventure", ticked: false },
{ icon: "<img src=/img/Animation.png>", name: "Animation", ticked: false },
{ icon: "<img src=/img/Biography.png />", name: "Biography", ticked: false },
{ icon: "<img src=/img/Comedy.png />", name: "Comedy", ticked: false },
{ icon: "<img src=/img/Comic-Book.png />", name: "Comic-Book", ticked: false },
{ icon: "<img src=/img/Crime.png>", name: "Crime", ticked: false },
{ icon: "<img src=/img/Disaster.png />", name: "Disaster", ticked: false },
{ icon: "<img src=/img/Drama.png />", name: "Drama", ticked: false },
{ icon: "<img src=/img/Fantasy.png />", name: "Fantasy", ticked: false },
{ icon: "<img src=/img/History.png>", name: "History", ticked: false },
{ icon: "<img src=/img/Horror.png>", name: "Horror", ticked: false },
{ icon: "<img src=/img/Music.png />", name: "Music", ticked: false },
{ icon: "<img src=/img/Musical.png />", name: "Musical", ticked: false },
{ icon: "<img src=/img/Mystery.png />", name: "Mystery", ticked: false },
{ icon: "<img src=/img/Romance.png>", name: "Romance", ticked: false },
{ icon: "<img src=/img/Sci-Fi.png />", name: "Sci-Fi", ticked: false },
{ icon: "<img src=/img/Sport.png />", name: "Sport", ticked: false },
{ icon: "<img src=/img/Thriller.png />", name: "Thriller", ticked: false },
{ icon: "<img src=/img/War.png>", name: "War", ticked: false },
{ icon: "<img src=/img/Western.png />", name: "Western", ticked: false }
];
$scope.msOpen = function( data ) {
console.log("open");
draglock = 1;
}
$scope.msClose = function( data ) {
console.log("closed");
draglock = 0; }
$rootScope.modify = function(){
if(wheight>=930){
sz1=300;
sz2=2.4;
}
else if(wheight>700 && wheight<929) {
sz1=283;
sz2= 3;
}
else if(wheight>500 && wheight<699) {
sz1=221;
sz2= 3.8;
}
else if(wheight>400 && wheight<499) {
sz1=157;
sz2=5.2;
}
else{
sz1=125;
sz2=6.6;
}
console.log("Modify");
// sz1 = $(window).width()*0.19;
panelCount = $rootScope.panelCount;
$scope.carousel.sz1 = sz1;
$scope.carousel.panelSize = sz1;
// if(typeof $scope.carousel.element.children[0] != 'undefined'){$scope.carousel.panelSize = $scope.carousel.element.children[0].clientWidth;}
$scope.carousel.rotateFn = $scope.carousel.isHorizontal ? 'rotateY' : 'rotateX';
// console.log(panelCount);
$scope.carousel.theta = 359 / ((panelCount+mrows));
theta = $scope.carousel.theta;
rotateXY = $scope.carousel.rotateFn;
var sizeadj = 12;
if(mrows == 1){sizeadj = 0.8;}
if(mrows == 2){sizeadj = sz2;}
$scope.carousel.radius = ($scope.carousel.panelSize*(mrows+panelCount/mrows))/(2*Math.PI); //Math.round(( $scope.carousel.panelSize/sizeadj) / Math.tan( Math.PI / (($scope.carousel.panelCount+mrows)) ) );
radius = $scope.carousel.radius;
$scope.carousel.rotation = Math.round( $scope.carousel.rotation / $scope.carousel.theta ) * $scope.carousel.theta;
rotation = $scope.carousel.rotation;
$scope.carousel.rotation = -4;
$scope.carousel.element.style[ transformProp ] = 'translateZ(-' + radius + 'px) ' + rotateXY + '(' + rotation + 'deg)';
// if(typeof $scope.carousel.element.children[0] != 'undefined'){$scope.carousel.sz1 = $scope.carousel.element.children[0].clientWidth;}
}
$scope.doubleClick = function(movieName){
console.log("test");
jQuery.post("/processrequest.php",
{name: movieName },
function(response){
if(response.length>5){alert(response);}
});
}
$rootScope.toggleCarousel = function(toMod){
panelCount = $rootScope.panelCount;
console.log("toggleCarousel");
if(toMod){return;}
if(panelCount > 20){
$('#container').addClass('container');
$('figure').addClass('figure');
filtered = 0;
$rootScope.modify(panelCount);
}
else{
$('figure').attr('style', '');
$('#carousel').attr('style', 'transform: translate(0px,0px)');
$('#container').removeClass('container');
$('figure').removeClass('figure');
filtered = 1;
}
$scope.carousel.element.style[ transformProp ] = 'translateZ(-' + radius + 'px) ' + rotateXY + '(' + rotation + 'deg)';
}
})
.directive('myDraggable', ['$document', function($document) {
return function(scope, element, attr) {
var startX = 0, startY = 0, x = 0, y = 0;
element.css({
position: 'relative',
border: '1px solid red',
backgroundColor: 'lightgrey',
cursor: 'pointer'
});
element.on('mousedown', function(event) {
// Prevent default dragging of selected content
event.preventDefault();
startX = event.pageX - x;
startY = event.pageY - y;
$document.on('mousemove', mousemove);
$document.on('mouseup', mouseup);
});
function mousemove(event) {
y = event.pageY - startY;
x = event.pageX - startX;
element.css({
top: y + 'px',
left: x + 'px'
});
}
function mouseup() {
$document.off('mousemove', mousemove);
$document.off('mouseup', mouseup);
}
};
}])
.filter('filterMultiple',["$rootScope", '$filter', function ($rootScope,$filter) {
return function (items, keyObj) {
var wcSearch = keyObj.wildcard;
var genres = keyObj.genres;
var filterObj=[];
for(var i=0;i<items.length;i++){
var filtered = true;
if(typeof wcSearch === 'undefined'){}
else if(wcSearch.length > 0){
if(wcSearch.toUpperCase().substring(0,wcSearch.length) != items[i].title.toUpperCase().substring(0,wcSearch.length) && wcSearch.toUpperCase().substring(0,wcSearch.length) != items[i].sortTitle.toUpperCase().substring(0,wcSearch.length)){filtered = false;}
}
if(filtered == true){
for(var x=0;x<$rootScope.genrefilter.length;x++){
if(items[i].genres.indexOf($rootScope.genrefilter[x])<0){filtered = false;}
}
}
if(filtered == true){
filterObj.push(items[i]);
}
}
*******Disabled due to infinite loop
// var ticked=[];
// var genreObj={};
// var $tempGenre=[];
// $tempGenre.genreList = $rootScope.genreList;
// for (var i=0;i<$tempGenre.genreList.length;i++){
// ticked[$tempGenre.genreList[i].name]=$tempGenre.genreList[i].ticked;
// }
// $tempGenre.genreList=[];
// if(typeof filterObj !== 'undefined'){
// for (var i=0;i<filterObj.length;i++){
// for (var z=0;z<filterObj[i].genres.length;z++){
// if($tempGenre.genreList.map(function(e) { return e.name; }).indexOf(filterObj[i].genres[z])==-1)
// {
// if(filterObj[i].genres[z] !=""){
// genreObj = {icon: "<img src=/img/"+filterObj[i].genres[z]+".png />", name: filterObj[i].genres[z], ticked: ticked[filterObj[i].genres[z]] };
// $tempGenre.genreList.push(genreObj);
// }
// }
// }
// }
// }
// $tempGenre.genreList.sort();
var toModify=false;
if($rootScope.panelCount == filterObj.length){toModify=true;}
console.log($rootScope.panelCount+","+filterObj.length);
$rootScope.panelCount = filterObj.length;
$rootScope.toggleCarousel(toModify);
$rootScope.genreList = $tempGenre;
return filterObj;
}
}])
.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
})
.directive('resize', function($window) {
return function (scope, element, attr) {
var w = angular.element($window);
scope.$watch(function () {
return {
'h': w.height(),
'w': w.width()
};
}, function (newValue, oldValue) {
scope.windowHeight = newValue.h;
scope.windowWidth = newValue.w;
scope.resizeWithOffset = function (offsetH) {
scope.$eval(attr.notifier);
return {
'height': (newValue.h - offsetH) + 'px'
};
};
}, true);
w.bind('resize', function () {
scope.$apply();
});
}
})
Obviously I'm very new to AngularJS and am likely doing everything wrong. I have searched for similar solutions to learn from but can't find anything that is doing quite what I'm working on. The main issue I am having at this point is if I include the code that limits genres to only those available in the sub-set of movie results it loops infinitely, and no matter which angle I take I can't seem to get it all to work together. Some guidance would be greatly appreciated, even if its just to recommend a better structure, I'm sure I'm putting too much into the controller among other fails.
Other unfinished portions:
- views for each type of content
- re-size elements on window size
- Drag and scroll behavior