We Keep Coding

setInterval error while console saying no errors

here's what happened. i was trying to develop a clicker game using html and css and js but the setInterval was not working while my console is going blank as if there were no errors.
first, i tried putting the function on top because last time when i put the var like this
setInterval(gg, cps)
let cps=0;
function upgrade2() {
removec(cpctwo*2)
newlv2()
cps-=99000;
}
function gg() {
document.getElementById("coins").innerHTML ++;
}
the console errored last time when i was using that so then i changes the var from the bottom to the top.
this is my current code html:
<div id="coin">
<h2> <code>$</code><code id="coins">0</code>
</h2>
<img src="https://st3.depositphotos.com/3027583/16082/v/950/depositphotos_160820424-stock-illustration-pixel-art-golden-coin-retro.jpg?forcejpeg=true" width="50" height="50" onclick="addc(cpc)">
</div>
<div id="upgrade">
<div id="morecoins"> Coins Lv
<span id="level">1</span>
<br> Cost:<span id="cost">0.5</span><br>
<button class="upgbtn" onclick="upgrade()">Upgrade
</button>
</s>
</div>
<div id="cps"> Income Lv
<span id="level2">1</span>
<br> Cost:<span id="cost2">2</span><br>
<button class="upgbtn" onclick="upgrade2()">Upgrade
</button>
</div>
</div>
<br>
<script src="scripts.js"></script>
<hr>
moreinfo:
<br><br>
New Update:<br>
1. turned "coins:" into "$"
<br>
2. new upgrade income/coins per second gui
<br>3. removed "title" <br>
fixed income upgrade cost and lv
<br><br>
engine version: V1.6
<br><br>
Heping Yang/Gleacc Corp
css:
#coin {
text-align: center;
}
.upgbtn {
padding: 4px 16px;
border: solid black 3px;
background: green;
border-radius: 12px;
}
#morecoins {
padding: 8px 12px;
border: solid black 3px;
background: yellowgreen;
border-radius: 12px;
}
#cps {
padding: 8px 12px;
border: solid black 3px;
background: yellowgreen;
border-radius: 12px;
}
js:
var coins = 0;
var cpc = 1;
var cpctwo = 1;
var lv = 1;
var cps = 100000;
function upgrade2() {
removec(cpctwo*2)
newlv2()
cps-=99000;
}
function gg() {
document.getElementById("coins").innerHTML ++;
}
setInterval(gg, cps);
function addc(x) {
coins += x;
var coinshtml = (document.getElementById("coins").innerHTML = `${coins}`);
}
function removec(x) {
coins -= x;
var coinsnewnew = (document.getElementById("coins").innerHTML = `${coins}`);
}
function newlv() {
lv += 1;
cpc +=24;
document.getElementById("cost").innerHTML = `${cpc/2}`;
document.getElementById("level").innerHTML = `${lv}`;
}
function upgrade() {
removec(cpc/2)
newlv()
}
let lv2 = 1;
function newlv2() {
lv2 += 1;
cpctwo +=8;
cps;
document.getElementById("cost2").innerHTML = `${cpctwo*2}`;
document.getElementById("level2").innerHTML = `${lv2}`;
}

Instead of .innerHTML method, add .textContent method so when you add a new coin the cast doesn't read the html so it won't output NaN. Instead, with .textContent method it will only get the text, for example, '5', and it will cast it without problems.

Javascript addEventListener Multi function

I want to make a progress bar, if you look at my code I am trying each time I click Next changing progress.style.width, for example, first time 33.33% and next 66.66% and last time 100%.
this is my first time asking a question in Stackoverflow sorry if I'm too new!
const next = document.querySelector("#next");
const progress = document.querySelector(".progress");
next.addEventListener("click", function() {
progress.style.width = "33%";
});
.progress {
height: 10px;
background: blue;
width: 0%
}
<button id="next">Next</button>
<br/>
<br/>
<div class='progress'></div>

You need to maintain some state for the current progress. I would recommend a separate variable but you could also parse the current progress.style.width value
const next = document.querySelector("#next");
const progress = document.querySelector(".progress");
next.addEventListener("click", () => {
const current = parseFloat(progress.style.width || "0");
const width = `${Math.min(current + 100/3, 100)}%`;
progress.style.width = width;
});
.progress-container {
border: 1px solid;
width: 200px;
height: 1rem;
}
.progress {
height: 1rem;
width: 0;
background-color: blue;
}
<button id="next">Next</button>
<div class="progress-container">
<div class="progress"></div>
</div>

Put .progress in a bigger container then define a value outside of function. Increase that value incrementally within the function. See closures
const next = document.querySelector("#next");
const progress = document.querySelector(".progress");
let ratio = 0;
next.addEventListener("click", function() {
ratio += 33.33;
ratio = ratio > 100 ? 100 : ratio;
progress.style.width = ratio+'%';
});
.fullbar {
background: yellow;
width: 50vw;
border: 2px inset blue;
}
.progress {
height: 10px;
background: blue;
width: 0%
}
<button id="next">Next</button>
<br/>
<br/>
<section class='fullbar'>
<div class='progress'></div>
</section>

My Code is working in Blogger but not in wordpress

Sir, My code is working properly in blogger but it is not working in wordpress. I'm a beginner so please help to resolve the issue. Please make some necessary changes to make it functional.
<style>
.button {
background-image: linear-gradient(to right, #0066ff, #00a1ff, #00c6eb, #00e087, #a8eb12);
border: 1px solid black;
color: white;
font-family: Arial;
font-size: small;
text-decoration: none;
padding: 3px;
}
.techly360{
background-image: linear-gradient(to right, #0066ff, #00a1ff, #00c6eb, #00e087, #a8eb12);
color: white;
}
</style>
<div style="text-align: center;">
Download File
<button id="btn" class="techly360">Click to Download</button>
<script>
var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "10 sec";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
function startDownload() {
this.style.display = 'none';
id = setInterval(function () {
counter--;
if (counter < 0) {
newElement.parentNode.replaceChild(downloadButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = +counter.toString() + " second.";
}
}, 1000);
};
var clickbtn = document.getElementById("btn");
clickbtn.onclick = startDownload;
</script>

var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
newElement.innerHTML = "10 sec";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
function startDownload() {
this.style.display = 'none';
id = setInterval(function () {
counter--;
if (counter < 0) {
newElement.parentNode.replaceChild(downloadButton, newElement);
clearInterval(id);
} else {
newElement.innerHTML = +counter.toString() + " second.";
}
}, 1000);
};
var clickbtn = document.getElementById("btn");
clickbtn.onclick = startDownload;
.button {
background-image: linear-gradient(to right, #0066ff, #00a1ff, #00c6eb, #00e087, #a8eb12);
border: 1px solid black;
color: white;
font-family: Arial;
font-size: small;
text-decoration: none;
padding: 3px;
}
.techly360{
background-image: linear-gradient(to right, #0066ff, #00a1ff, #00c6eb, #00e087, #a8eb12);
color: white;
}
<div style="text-align: center;">
Download File
<button id="btn" class="techly360">Click to Download</button>

The structure of work in WordPress is different. if you use this code as a html file it's work true. like this:
https://file.io/4a0F1OL14avi
but in wordpress you need to seperate codes. (like as image)
1-copy html code in post content
2-copy style and script in header.php (in root of the theme) before
enter image description here

Random name picker with bounce animation

I'm looking to create a random name picker with HTML, JS and CSS which has gone quite well as you can see here... http://clients.random.agency/namepicker/
However, the client has asked for it to have a similar animation to this with ...
https://www.dropbox.com/s/3likecb0ld30som/Jv0Gp4XkhQ.mp4?dl=0
I've search google but I can't seem to find any examples of what I'm looking for and would really appreciate if anyone could point me in the right direction.

This is a simple example, hope be helpful.
var names =['John', 'David', 'Joe', 'Sara'];
var nameCount= names.length;
var p = document.getElementById("container");
var randTimer = setInterval(function(){ p.innerHTML = names[Math.floor(Math.random() * nameCount)]; }, 200);
function stop(){
clearInterval(randTimer);
}
#container{
color: red;
font-size:2rem;
text-align:center;
cursor: pointer;
}
<p id="container" onClick="stop()"></p>
<p>click on random names to pick one!</P>

Here's a pretty similar example I was able to find. Using Javascript seems to be the most straightforward way to go about doing this. https://codepen.io/maerianne/pen/pRQbQr
var myScrollTop = function(elem, delay){
elem.animate({ scrollTop: 0 }, delay, function(){
myScrollBottom(elem, delay);
});
};
var myScrollBottom = function(elem, delay){
elem.animate({ scrollTop: elem.height() }, delay, function(){
myScrollTop(elem, delay);
});
};
var scrollUpDown = function(elem, delay) {
myScrollTop(elem, delay);
};
$(document).ready(function(){
scrollUpDown($(".scroll-up-down"), 5000);
});
As you can see, scrollUpDown()is the initial function which starts a loop switching between myScrollTop() and myScrollBottom(). You could pretty easily make the delay increase with each iteration to mimic the slowing down and eventual stop in the example animation you gave.
You could also refactor this to be a singular recursive function.
Best of luck!

It picks a random item from the array of labels. Then it goes into a loop, changing the label to the next item in the array until it gets to the chosen one, and using animation for the transitions
$('#search_btns button:nth-child(2)').hover(function() {
btnTimeID = setTimeout(function() {
// We are using the math object to randomly pick a number between 1 - 11, and then applying the formula (5n-3)5 to this number, which leaves us with a randomly selected number that is applied to the <ul> (i.e. -185) and corresponds to the position of a word (or <li> element, i.e. "I'm Feeling Curious").
var pos = -((Math.floor((Math.random() * 11) + 1)) * 5 - 3) * 5
if (pos === -135) {
console.log("position didn't change, let's force change")
pos = -35;
}
$('#search_btns button:nth-child(2) ul').animate({'bottom':pos + 'px'}, 300);
// Change the width of the button to fit the currently selected word.
if (pos === -35 || pos === -110 || pos === -185 || pos === -10 || pos === -60 || pos === -160) {
console.log(pos + ' = -35, -110, -185, -10, -60, -160');
$('#search_btns button:nth-child(2)').css('width', '149px');
} else if (pos === -85) {
console.log(pos + ' = -85');
$('#search_btns button:nth-child(2)').css('width', '160px');
} else if (pos === -210) {
console.log(pos + ' = -210');
$('#search_btns button:nth-child(2)').css('width', '165px');
} else {
console.log(pos + ' = -260, -235');
$('#search_btns button:nth-child(2)').css('width', '144px');
}
},200);
}, function() {
clearTimeout(btnTimeID);
setTimeout(function() {
console.log('setTimeout function');
$('#search_btns button:nth-child(2) ul').css('bottom', '-135px'); // this is the original position
$('#search_btns button:nth-child(2)').css('width', '144px'); // reset the original width of the button
},200);
});
body, html {
margin: 0;
box-sizing: border-box;
font-family: arial;
}
*, *:before, *:after {
box-sizing: inherit;
}
#search_btns {
width: 400px;
margin: 30px auto;
padding-left: 60px;
}
#search_btns button:nth-child(2) {
width: 144px;
}
#search_btns button:nth-child(1) {
bottom: 12px;
}
#search_btns button {
position: relative;
height: 34px;
margin: 3px;
font-weight: bold;
color: gray;
background: #f1f1f1;
border: 1px solid #f1f1f1;
border-radius: 2px;
padding: 0 15px;
overflow: hidden;
}
#search_btns button:hover {
color: black;
border: 1px solid #bdbdbd;
box-shadow: 0px 0.5px 0px 0px #d3d3d3;
}
#search_btns button:active {
border: 1px solid #7f7fff;
}
#search_btns button:focus {
outline: 0;
}
#search_btns button ul li {
list-style-type: none;
padding: 5px 0;
text-align: left;
}
#search_btns button ul {
padding-left: 0;
position: absolute;
bottom: -135px;
width: 144px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="search_btns">
<button>This might be the effect you looking for</button>
<button>
<ul>
<li>item0/li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
</ul>
</button>
</div>
</body>
</html>

How can I have two input texts with two canvases

In my code I have two canvases where I can input text. When I write text, it fits into the canvas (the font-size is decreasing) and also I can change the color and font-family.
So when I write into the first input text it appears on the first canvas. But when I try to write on the second input text it doesn't show up on the second canvas (if I press the blue button for changing the color, only then shows up). Here is the JSFiddle code: https://jsfiddle.net/noytmwu7/24/ .I would really appreciate your help!
var canvas4 = document.getElementById("canvas4");
var ctx4 = canvas4.getContext("2d");
var clubNameFontFamily = "Arial Black";
var clubNameFontSize = "20px";
var clubNameFontStyle = "bold";
var clubNameFontColor = "#000000";
$('#clubNameTag').bind('change keyup input', redrawTextsCan4);
$('#clubNameLine1').bind('click', redrawTextsCan4);
function redrawTextsCan4() {
ctx4.clearRect(0, 0, canvas4.width, canvas4.height);
ctx4.textAlign = "center";
ctx4.fillStyle = clubNameFontColor;
clubNameFontSize = fitClubNameOnCanvas(ctx4, $('#clubNameLine1').val().toUpperCase(), clubNameFontFamily);
ctx4.font = clubNameFontStyle + " " + clubNameFontSize + "px " + clubNameFontFamily;
ctx4.fillText($('#clubNameLine1').val().toUpperCase(), canvas4.width * 0.5, 30);
}
function fitClubNameOnCanvas(ctx, text, fontface) {
var size = clubNameMeasureTextBinMethod(ctx, text, fontface, 0, 80, canvas4.width);
if (size > 18) return 18;
return size;
}
function clubNameMeasureTextBinMethod(ctx, text, fontface, min, max, desiredWidth) {
if (max - min < 1) {
return min;
}
var test = min + ((max - min) / 2); //Find half interval
ctx.font = test + "px " + fontface;
measureTest = ctx.measureText(text).width;
if (measureTest > desiredWidth) {
var found = clubNameMeasureTextBinMethod(ctx, text, fontface, min, test, desiredWidth)
} else {
var found = clubNameMeasureTextBinMethod(ctx, text, fontface, test, max, desiredWidth)
}
return found;
}
function clubNameColor(v4) {
v4 = v4.dataset.id;
switch (v4) {
case "littleblue":
clubNameFontColor = "#33ccff";
break;
case "orange":
clubNameFontColor = "#ff9900";
break;
}
redrawTextsCan4();
}
function changeClubNameFontFamily(v5) {
switch (v5) {
case "franklin":
clubNameFontFamily = "Franklin Gothic";
break;
case "impact":
clubNameFontFamily = "Impact";
break;
}
redrawTextsCan4();
}
//the second one
var canvas11 = document.getElementById("canvas11");
var ctx11 = canvas11.getContext("2d");
var selectedTextFont = "Arial Black";
var selectedFontSize1 = "20px";
var selectedFontStyle = "bold";
var selectedFontColor = "#000000";
var selectedFontSize2 = "20px";
$('#nametag2').bind('change keyup input', redrawTextsCan11);
$('#line4').bind('click', redrawTextsCan11);
function redrawTextsCan11() {
ctx11.clearRect(0, 0, canvas11.width, canvas11.height);
ctx11.textAlign = "center";
ctx11.fillStyle = selectedFontColor;
selectedFontSize1 = fitTextOnCanvas(ctx11, $('#line4').val().toUpperCase(), selectedTextFont);
ctx11.font = selectedFontStyle + " " + selectedFontSize1 + "px " + selectedTextFont;
ctx11.fillText($('#line4').val().toUpperCase(), canvas11.width * 0.5, 30);
}
function fitTextOnCanvas(ctx, text, fontface) {
var size = measureTextBinaryMethod(ctx, text, fontface, 0, 80, canvas11.width);
if (size > 18) return 18;
return size;
}
function measureTextBinaryMethod(ctx, text, fontface, min, max, desiredWidth) {
if (max - min < 1) {
return min;
}
var test = min + ((max - min) / 2); //Find half interval
ctx.font = test + "px " + fontface;
measureTest = ctx.measureText(text).width;
if (measureTest > desiredWidth) {
var found = measureTextBinaryMethod(ctx, text, fontface, min, test, desiredWidth)
} else {
var found = measureTextBinaryMethod(ctx, text, fontface, test, max, desiredWidth)
}
return found;
}
function color11(v11) {
v11 = v11.dataset.id;
switch (v11) {
case "littleblue":
selectedFontColor = "#33ccff";
break;
case "orange":
selectedFontColor = "#ff9900";
break;
}
redrawTextsCan11();
}
function chfont5(v5) {
switch (v5) {
case "franklin":
selectedTextFont = "Franklin Gothic";
break;
case "impact":
selectedTextFont = "Impact";
break;
}
redrawTextsCan11();
}
#canvas4 {
border: 2px dotted red;
border-radius: 5px;
}
#canvas11 {
border: 2px dotted red;
border-radius: 5px;
}
.littleblue {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: #33ccff;
}
.littleblue:hover,
.littleblue:active,
.littleblue:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.orange {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: orange;
}
.orange:hover,
.orange:active,
.orange:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 style="font-size: 15px;padding-top: 10px">Text Colour</h3>
<button type="button" class="littleblue" data-id="littleblue" onclick="clubNameColor(this)"></button>
<button type="button" class="orange" data-id="orange" onclick="clubNameColor(this)"></button>
<h3 style="font-size: 15px;padding-top: 10px">Choose Font</h3>
<select name="Font" onchange="changeClubNameFontFamily(this.value)">
<option value="franklin" style="font-family: Franklin Gothic">FRANKLIN GOTHIC</option>
<option value="impact" style="font-family: Impact">IMPACT</option>
</select>
<h3 style="font-size: 15px;padding-top: 10px">Write text</h3>
<form action="" method="POST" id="clubNameTag" class="nametag">
Line1:
<input type="text" id="clubNameLine1" maxlength="12" name="line1" style="width:220px; height: 30px" />
<br>
<canvas id="canvas4" width=110 height=30 style=" position: absolute; top: 20px; left: 134px; z-index: 10; "></canvas>
<!-- second one -->
<h3 style="font-size: 15px;padding-top: 10px">Text Colour</h3>
<button type="button" class="littleblue" data-id="littleblue" onclick="color11(this)"></button>
<button type="button" class="orange" data-id="orange" onclick="color11(this)"></button>
<h3 style="font-size: 15px;padding-top: 10px">Choose Font</h3>
<select name="Font" onchange="chfont5(this.value)">
<option value="franklin" style="font-family: Franklin Gothic">FRANKLIN GOTHIC</option>
<option value="impact" style="font-family: Impact">IMPACT</option>
</select>
<h3 style="font-size: 15px;padding-top: 10px">Write text</h3>
<form action="" method="POST" id="nametag2" class="nametag">
Line1:
<input type="text" id="line4" maxlength="12" name="line1" style="width:220px; height: 30px" />
<canvas id="canvas11" width=110 height=30 style=" position: absolute; top: 60px; left: 134px; z-index: 10; "></canvas>

In your HTML the closing form tags are missing, so the second form is inside the first. When I added the closing form tags on the jsFiddle things worked as expected.
The reason it was not working was because the eventHandler below to draw "Can4" was also being triggered by changes to the input on the second form (add an alert in the redrawTextsCan4 function before adding the missing form tags and you will see it appears when a character is typed in the lower input field).
$('#clubNameTag').bind('change keyup input', redrawTextsCan4);
So to summarise, the answer is to add the missing closing form tags.