We Keep Coding

How can I create a button that increments a counter when clicked?

I am trying to make a button that increments a counter's value by 1 when clicked. My code, however, doesn't seem to work.
var count = 1;
var button = document.querySelector("#increment");
button.addEventListener("click", function() {
var increment = document.getElementById("#count");
increment.value = count;
count++;
});
<h4>Current count: <span id="count">0</span></h4>
<div class="container">
<button id="decrement">Decrement</button>
<button id="increment">Increment</button>
</div>

You don't need # in getElementById and use innerHTML to set value.
Don't use querySelector when you can get by id.
Like this:
let count = 0;
const button = document.getElementById("increment");
const button2 = document.getElementById("decrement");
const textHolder = document.getElementById("count");
textHolder.innerHTML = count;
button.addEventListener("click", function() {
textHolder.innerHTML = ++count;
});
button2.addEventListener("click", function() {
textHolder.innerHTML = --count;
});
<h4>Current count: <span id="count">0</span></h4>
<div class="container">
<button id="decrement">Decrement</button>
<button id="increment">Increment</button>
</div>

Your code have some issues
Use # in query selector, remove it, it use in jquery
Wrong attribule value change to innerText
Change querySelector to getElementById to get id
var count = 1;
var button = document.getElementById("increment");
button.addEventListener("click", function() {
var increment = document.getElementById("count");
increment.innerText = count;
count++;
});
<h4>Current count: <span id="count">0</span></h4>
<div class="container">
<button id="decrement">Decrement</button>
<button id="increment">Increment</button>
</div>

.document.getElementById() doesn't need CSS selector indicator, you can just pass the id value directly here is how to do it, note that I'm using + operator to make sure that the textContent parsed into integer, and to increment the value you can just add ++ after that to count tag that we have reference to, here is a working snippet:
var count = 1;
var IncrementBtn = document.querySelector("#increment");
var decrementBtn = document.querySelector("#decrement");
IncrementBtn.addEventListener("click", function() {
var increment = document.getElementById("count");
+increment.textContent++;
});
decrementBtn.addEventListener("click", function() {
var decrement = document.getElementById("count");
+decrement.textContent--;
});
<h4>Current count: <span id="count">0</span></h4>
<div class="container">
<button id="decrement">Decrement</button>
<button id="increment">Increment</button>
</div>

You can do this with this short JS inserted in the HTML button elements:
<h4>Current count: <span id="count">0</span></h4>
<div class="container">
<button onclick="document.getElementById('count').innerText--">Decrement</button>
<button onclick="document.getElementById('count').innerText++">Increment</button>
</div>
If you want to use a function you can try something like this:
function changeValue(diff) {
var count = document.getElementById('count');
count.innerText = +count.innerText + diff;
}
<h4>Current count: <span id="count">0</span></h4>
<div class="container">
<button onclick="changeValue(-1)">Decrement</button>
<button onclick="changeValue(1)">Increment</button>
</div>

Dynamiclly append different class with increment numereic value by click event

I have a span tag and a button tag
<span class="myspan">1</span>
<button id="add">Add +1</button>
var arr=["myspan1","myspan2","myspan3","myspan4"}
I want to append more span tag with new class from this array with increment value by clicking button.
Like this output:
<span class="myspan1">1</span>
<span class="myspan2">2</span>
<span class="myspan3">3</span>
<span class="myspan4">4</span>
i try `
this JsFiddle
But i can not add class name to new append tag from array.
Another useful link for appending tag with new class from array
http://jsbin.com/nojipowo/2/edit?html,css,js,output
...
But i can not bring my desire output at any case...enter code here
value increaseesenter code here this snippet
<script> var i = 0; function buttonClick() {i++; document.getElementById('inc').value = i; } </script> <button onclick="buttonClick();">Click Me</button> <input type="text" id="inc" value="0"></input>
another attempt...anyone can help.. to get desire output
var i=6;
var backgrounds = ["myspan1", "myspan2", "myspan4"];
var elements = document.getElementsByClassName("myspan");var len = backgrounds.length;
$("#add").click( function() {
(i < elements.length){
$(".new-field").append('<span class="myspan">1</span><script');
var value = parseInt($(".myspan").text(), 10) + 1;
elements[i].className += ' ' + backgrounds[i%len];
i++;
$(".background").text(i);
}
});
*/
<span class="myspan">1</span>
<button id="add">Add +1</button>
<div class="new-field">
</div>

<script> var i = 0; function buttonClick() {i++; document.getElementById('inc').value = i; } </script> <button onclick="buttonClick();">Click Me</button> <input type="text" id="inc" value="0"></input>

Try this check the span length via parseInt($(".myspan").length) .And use with Array#forEach for iterate the array instead of increment i.parseInt used convert ths string to number
var i=6;
var backgrounds = ["myspan1", "myspan2", "myspan4"];
var len = backgrounds.length;
$("#add").click( function() {
var len = parseInt($(".myspan").length)
backgrounds.forEach(function(a){
$(".new-field").append('<span class="'+a+'">'+(len++)+'</span>');
})
console.log($(".new-field").html())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="myspan">1</span>
<button id="add">Add +1</button>
<div class="new-field">
</div>

Check the fiddle. Hope this helps!
HTML :
<div id="mainContainer">
<span class="myspan">1</span>
</div>
<button id="add">Add +1</button>
JS :
var arr = ["myspan1", "myspan2", "myspan3", "myspan4"];
$("#add").on("click", function() {
var spans = $("span");
var classList = [];
$.each(spans, function() {
var elemCls = $(this).attr('class').length > 1 ? $(this).attr('class').split(' ') : $(this).attr('class');
if (elemCls) {
$.each(elemCls, function() {
classList.push(this.toString());
});
}
});
$.each(arr, function(i, e) {
if ($.inArray(e, classList) == -1) {
$("#mainContainer").append("<span class='" + e + "'>" + parseInt(spans.length + 1) + "</span>");
return false;
}
});
});

JS NaN after array[index]

I just started programming with js again and having some trouble.
This is the code i have problems with:
var actual = [10,50,20];
var sum = 0;
for(var i = actual.length; i > 0; i--){
sum = sum + actual[i];
}
What did i do wrong?

Start loop from actual.length-1, because every array starts from 0, so last element is actual.length-1 not actual.length.

I see Your calculator code is too complicated.
You do low level operation to add just "1" You multiply all things to 10 and add 1.
Be simple (;
var inputElement = document.getElementById("input");
var resultElement = document.getElementById("result");
var accept = [0,1,2,3,4,5,6,7,8,9,'-','+','calc'];
var input = [];
function op(value){
if(accept.indexOf(value) < 0) {
return;
}
if(value == 'calc') {
return calc();
}
input.push(value);
inputElement.innerHTML = input.join('');
}
function calc() {
resultElement.innerHTML = eval(input.join(''));
input = [];
}
<button onclick="op(1)">1</button>
<button onclick="op(2)">2</button>
<button onclick="op(3)">3</button>
<br/>
<button onclick="op(4)">4</button>
<button onclick="op(5)">5</button>
<button onclick="op(6)">6</button>
<br/>
<button onclick="op(7)">7</button>
<button onclick="op(8)">8</button>
<button onclick="op(9)">9</button>
<br/>
<button onclick="op(0)">0</button>
<button onclick="op('.')">.</button>
<button onclick="op('calc')">=</button>
<hr/>
<button onclick="op('+')">+</button>
<button onclick="op('-')">-</button>
<hr/>
INPUT:<div id="input"></div>
DISPLAY:<div id="result"></div>

How to delay function execution when it calls 2 and more times in JS?

Below is the link with my code. Please click the button several times in order to see what I mean exactly. I am trying to call the same function more than once with intervals between function calls. Please help me.
http://codepen.io/arminemash/pen/KzBBjN
HTML
<div id='generalwrapper'>
<div id='general'>
<div id='1' class='cell' onclick='simon(this.id)'></div>
<div id='2' class='cell' onclick='simon(this.id)'></div>
<div id='3' class='cell' onclick='simon(this.id)'></div>
<div id='4' class='cell' onclick='simon(this.id)'></div>
</div>
<div id='buttondiv'>
<button onclick='startGame()'>On</button>
</div>
</div>
JavaScript
var browser=[];
var count = 1;
function startGame(){
for(var i=0;i<count;i++){
browserturn();
}
count++;
}
function browserturn(){
var x=getNumber();
var element=x.toString();
browser.push(element);
var y=document.getElementById(element);
y.click();
$(y).delay(100).fadeOut().fadeIn('slow');
}
function getNumber(){
var randomNumber=Math.floor((Math.random() * 4)+1);
return randomNumber;
}

This will guarantee a gap of 100ms between all games
var tasks = []
var createTask = function(task) {
tasks.push(function() {
task(function() {
tasks.shift()
var next = tasks[0]
next()
})
})
if (tasks.length === 1) {
tasks[0]()
}
}
var startGame = function() {
createTask(function(next) {
... // whatever happens
// if ready call next
setTimeout(next, 1000)
})
}
http://codepen.io/lipp/pen/eZjopG

adding buttons after appending firstChild

Basically I want to add two more buttons to edit and delete the appended firstChild value.
How do I do that?
function writeParagraph() {
var comment = prompt("Type content for new paragraph here", "");
var newParagraph = document.createElement('p');
newParagraph.textContent = comment;
document.getElementById("updateDiv").appendChild(newParagraph);
}
function deleteParagraph() {
var items = document.querySelectorAll("#updateDiv p");
if (items.length) {
var child = items[0];
child.parentNode.removeChild(child);
}
}
HTML:
<div align="center"> <button onclick="store();prompter();">Click Me and type!</button> </div>
<div align="center"> <button onclick="undo()">Undo</button></div>
<div align="center"> <button onclick="prompter2()">Set Allign</button></div>
<div align="center"> <button id="a" onclick="writepara()">Click for a new paragraph</button></div>
<div align="center"> <button id="b" onclick="deleteParagraph()">Click to delete the new paragraph</button></div>
<div id='updateDiv' align="center"> </div>

Delete would be:
function deleteParagraph() {
var items = document.querySelectorAll("#updateDiv p");
if (items.length) {
var child = items[0];
child.parentNode.removeChild(child);
}
}
Edit would be:
function changeParagraph(newHTML) {
var items = document.querySelectorAll("#updateDiv p");
if (items.length) {
var child = items[0];
child.innerHTML = newHTML;
}
}
You will have to separately prompt from whatever text you want to pass to changeParagraph().