We Keep Coding

How do I make an Array of Buttons out of this in JS? And How do I set Random Images with this?

So I`m trying to make a Memory Game. At the moment I´m trying to set the Image of the card randomly but my code just changes to top Image.
var images = ["url(IMG1.jpg)","url(IMG2.jpg)"...];
var randomIMG =0;
var card = "<div class='flip-card'><div class='flip-card-inner'><div class='flip-card-front'><button id='button'onclick='Flipfront(this)'style='width:300px;height:300px; marign:50px; background-image:url(Frontpage.jpg);'></button></div><div class='flip-card-back'><button id='button2'onclick='Flipback(this)'style='width:300px;height:300px; marign:50px; background-image:images[randomIMG];background-repeat:no-repeat;background-size:contain;'></button></div></div></div>"
for (let i = 0; i < level; i++) {
document.querySelector("#container").innerHTML +=card;
}
function RandomBG(){
for (let i = 0; i<level;i++){
randomIMG = Math.floor(Math.random()*9)+0;
document.getElementById("button2").style.backgroundImage = images[randomIMG];
}
}
function Flipfront(el){
RandomBG();
el.closest('.flip-card').classList.add('flipped');
flipped++;
}
And Also for later on, how do I put all my Buttons into an array?

In this line
document.getElementById("button2").style.backgroundImage = images[randomIMG];
you are setting the background of button2. You need to ensure that you get the correct element:
function RandomBG(el){
for (let i = 0; i<level;i++){
randomIMG = Math.floor(Math.random()*9)+0;
el.style.backgroundImage = images[randomIMG];
}
}
and that you pass it:
function Flipfront(el){
RandomBG();
el.closest('.flip-card').classList.add('flipped');
flipped++;
}

If all you are trying to do is get all the buttons in the page:
let btns = document.querySelectorAll("button");
And if you want a few specific ones, change the css selector.

Issues in setting cookies for store form input values in javascript

I took below code from online,
var myValues = [];
for(i=0;i<inputs.length;i++) {
validateEmail(inputs[i]);
myValues.push(inputs[i].value);
}
// Save them fot later use
localStorage.myValues = JSON.stringify(myValues);
// After clicking the button you can retrieve them back
var oldValues = JSON.parse(localStorage.myValues);
I created simple asp page,
Now, If i click the next after after enter some input value, it will go to next page, and again i click back, it doesn't show entered input values.
I need to show that values, may i know, how can i achieve this one thanks in advance.
Here is the worked jsfiddle
I need to add with my existing javascript code for achieving my need.
But i just confused, how to add code?
Can anyone help me? Thanks in advance.

On page load, you must add the following code:
var $inputs = $(".input");
var myValues = localStorage.getItem("myValues") ? JSON.parse( localStorage.getItem("myValues") ) : [];
for(var i = 0; i < myValues.length; i++) {
$inputs[i].value = myValues[i];
}
This will make sure that on page load, if any data is present in the localStorage it will be populated in the respective input fields.
Now when you click on next button:
$("#nextbutton").click(function () {
var myValues = [],
$inputs = $('.input');
for (i = 0; i < $inputs.length; i++) validateEmail($inputs[i]);
if ($('.invalid').length !== 0) return false;
for (i = 0; i < $inputs.length; i++) {
myValues.push($inputs[i].value)
}
localStorage.myValues = JSON.stringify(myValues);
});
This is used to store the data into the localStorage after validation.

How can I show/change array contents?

I'm doing the quiz from javascriptissexy.
Dynamically (with document.getElementById or jQuery) remove the current question and add the next question, when the user clicks the “Next” button. The Next button will be the only button to navigate this version of the quiz.
How can I remove the current question + list of answers and display the new ones dynamically? It works fine right now but think it's asking me to make the transition from questions smoother.
function nextQuestion(){
j++;
currentQuestion.innerHTML = allQuestions[j].question;
for(var i = 0; i < allQuestions[j].choices.length; i++){
currentChoices[i].innerHTML = allQuestions[j].choices[i];
};
};

Before replacing the content, you must to hide, change the content and then show-it again
$("#question").fadeOut("slow", function(){
$("#question_content").html(allQuestions[question].question);
for(var i = 1; i <= allQuestions[question].choices.length; i++){
$("#choise"+i).html(allQuestions[question].choices[i-1]);
};
$("#question").fadeIn("slow");
});
Please see this example on JSFiddle http://jsfiddle.net/en4rt9o7/

You can remove using the shift
function nextQuestion() {
var question = allQuestions.shift();
currentQuestion.innerHTML = question.question;
for (var i = 0; i < question.choices.length; i++) {
currentChoices[i].innerHTML = question.choices[i];
};
};

Heatmap for Link clicks with only one function for all

I got a problem while writung a code for a Heatmap based on link clicks.
I have a Page with different articel teasers. When i click the link the artical itself opensup. Now i want to track in real time how often which articel is clicked so i can decide which articel is relevant to users and place it like on the first articel space and so on.
Therefor i wrote a function which tracks the clicks with a counter and show them in the div.
Now my problem is. That i cant write like 20 functions for counters and 20 for resets. I want to have one function which can decide which articel was clicked and add +1 to the counter of the link.
My Code for the counter and the reset + the link text gets red after more than 5 clicks.
var count1 = 0;
function heatmap(id) {
if(id==1){
count1++;
document.getElementById("count1").innerHTML = count1;
}
if(count1>=5){
document.getElementById("link1").style.color = "red";
}
}
function reset(id){
if(id==1){
count1=0;
document.getElementById("count1").innerHTML = 0;
}
}
My html code so far
<div style="text-align:center; font-size:20px; font-family: arial;">
<div id="link1" onclick="heatmap(1)">This is the first Link</div><br>
<div id="count1">0</div><br>
<button onclick="reset(1)">RESET</button>
<button onclick="save(1)">SAVE</button>
</div>
Now my main problem is that i only want one function for all the link tracking.
Is there a possibiblity to write the code in a way the variables are dynamicly so that the function can decide which link was clicked.
for example something like:
var count + ID = 0;
function heatmap(ID) {
count + ID ++;
document.getElementById("count" + ID).innerHTML = count+ID;
}
if(count + ID >=5){
document.getElementById("link + ID").style.color = "red";
}
}
function reset(id){
count + ID =0;
document.getElementById("count + ID").innerHTML = 0;
}
}
I already searched this homepage and did some google searches but all i found was working with arrays or lists. But i think this wouldnt realy work for me since i want to give my function an ID and later add this id to the varibale name like count + ID = count | count + ID = count2 same with the document.getElementById("count" + ID).innerHTML = count+ID; = document.getElementById("count1").innerHTML = count1;
As you can see the link got a onclick="heatmap(ID)" this ID will be added to every articel Link and will go from the first articel with 1 to the last articel with like 20.
If i change an Articel the counter will be resetet and the ID will be changed to its position. So there will always be a identifier with the ID which can be used for the counter.

You could loop through all articles and store a counter on each element which you update or reset once the specific button inside the article was clicked:
var articles = document.querySelectorAll('article');
for(var i=0; i < articles.length; i++) {
articles[i].querySelector('.save').addEventListener('click', updateCounter);
articles[i].querySelector('.reset').addEventListener('click', resetCounter);
articles[i]['counter'] = 0;
}
function updateCounter(ev) {
var article = ev.target.parentNode;
article.counter++;
article.querySelector('.counter').innerHTML = article.counter;
/* Some server synchronisation should go here */
}
function resetCounter(ev) {
var article = ev.target.parentNode;
article.counter = 0;
article.querySelector('.counter').innerHTML = article.counter;
/* Some server synchronisation should go here */
}
DEMO
But to permanently store the counters you have to synchronize your results with a server, respectively a database.
If you just want to use one function you could realize it like this:
var articles = document.querySelectorAll('article');
for(var i=0; i < articles.length; i++) {
articles[i].querySelector('.save').addEventListener('click', checkCounter);
articles[i].querySelector('.reset').addEventListener('click', checkCounter);
articles[i]['counter'] = 0;
}
function checkCounter(ev) {
var article = ev.target.parentNode,
button = ev.target;
if(button.classList[0] === 'save') {
article.counter++;
} else if(button.classList[0] === 'reset') {
article.counter = 0;
}
article.querySelector('.counter').innerHTML = article.counter;
}
DEMO

Update div with jQuery upon entry of data

I have a form with four text input elements. Every time one of them is updated, I want the sum of the four text input boxes to be displayed in a div below without the user pushing a button. Here's what I have so far (I got the idea from here [does this only work with select?]):
var getSum = function() {
var email = $('#emailDown').val();
var internet = $('#internetDown').val();
var server = $('#serverDown').val();
var desktop = $('#pcDown').val();
//TODO:Check for integers (not needed with sliders)
var sum = email + internet + server + desktop;
$('totalHoursDown').html(sum);
}
$('#emailDown').change(getSum(event));
$('#internetDown').change(getSum(event));
$('#serverDown').change(getSum(event));
$('#pcDown').change(getSum(event));
Currently, it's not updating. (Don't worry about validating). I'm new to PHP, so I'm not sure if I should be using it in this instance.

You are missing a # or . in your selector, depending on if totalHoursDown is a class or an ID:
$('totalHoursDown').html(sum);
// Should be this if ID
$('#totalHoursDown').html(sum);
// or this if class
$('.totalHoursDown').html(sum);
Update:
I modified the code by jmar777 a bit to make it work. Try this instead:
$(function(){
var $fields = $('#emailDown, #internetDown, #serverDown, #pcDown'),
$totalHoursDown = $('#totalHoursDown');
$fields.change(function() {
var sum = 0;
$fields.each(function()
{
var val = parseInt($(this).val(), 10);
sum += (isNaN(val)) ? 0 : val;
});
$totalHoursDown.html(sum);
});
});
​Here is a working fiddle as well: http://jsfiddle.net/mSqtD/

Try this:
var $fields = $('#emailDown, #internetDown, #serverDown, #pcDown'),
$totalHoursDown = $('#totalHoursDown');
$fields.change(function() {
var sum = 0;
$fields.each(function() { sum += $(this).val(); });
$totalHoursDown.html(sum);
});
Also, in your example, you had $('totalHoursDown').html(sum);, which I'm assuming was intended to be an ID selector (i.e., $('#totalHoursDown').html(sum);.