We Keep Coding

Uncaught ReferenceError: html is not defined [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 days ago.
This post was edited and submitted for review 2 days ago.
Improve this question
I am just using Javascript here, to make a login page that using captcha. But it throw an error when I tried to produce it. It was saying that html is not defined, I already tried to check the code, but still could not figure it out what went wrong here.
here is the Javascript code that I think the problem is:
(function () {
const fonts =['cursive', 'sans-serif', 'serif', 'monospace'];
let captchaValue = "";
function generateCaptcha(){
let value = btoa(Math.random()*100000000);
value = value.substr(0,5+Math.random()*5);
captchaValue= value;
}
function setCaptcha() {
captchaValue.split("").map((char)=> {
const rotate = -20 + Math.trunc(Math.random()*30);
const font = Math.trunc(Math.random()*fonts.length);
return `<span
style="
transform:rotate(${rotate}deg);
font-family: ${fonts[font]};
"
>
${char}
</span>`;
}).join("");
document.querySelector(".login-form .captcha .preview").innerHTML = html;
}
function initCaptcha(){
document.querySelector(".login-form .captcha .captcha-refresh").addEventListener('click', function(){
generateCaptcha();
setCaptcha();
});
generateCaptcha();
setCaptcha();
}
initCaptcha();
})();
Please helping me to solve this problem, since I am a beginner so I really got no idea when I am getting this error.

Your problem seems to be in this line of code:
document.querySelector(".login-form .captcha .preview").innerHTML = html;
you are setting the innerHTML of the ".preview" element to html which you didn't define anywhere in your code.
I'm not sure of what you want to set it to, but this is merely a guess, you can change the setCaptcha to the following:
function setCaptcha() {
let html = captchaValue.split("").map((char)=> {
const rotate = -20 + Math.trunc(Math.random()*30);
const font = Math.trunc(Math.random()*fonts.length);
return `<span
style="
transform:rotate(${rotate}deg);
font-family: ${fonts[font]};
"
>
${char}
</span>`;
}).join("");
document.querySelector(".login-form .captcha .preview").innerHTML = html;
}

Line under navbar when scrolling [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
How can I draw a line under navbar when scrolling in React or JavaScript. Like this :
enter image description here

Easy to use scroll listener and progress element.
const progressDOM = document.querySelector("#progress");
window.addEventListener("scroll", () => {
let scrollTop = window.scrollY;
let docHeight = document.body.offsetHeight;
let winHeight = window.innerHeight;
let scrollPercent = scrollTop / (docHeight - winHeight);
let scrollPercentRounded = Math.round(scrollPercent * 100);
progressDOM.value = scrollPercentRounded;
});
#progress{
position: fixed;
}
<progress id="progress" max="100" value="0"></progress>
<div style="height: 10000px;"></div>

it's easy in your script file use scroll event
Example
window.addEventListener("scroll", function() {
//Select your navigation bar
var nav = document.getElementsByTagName("nav")[0];
//Change 20 to anything you want like nav.offsetHeight
if(window.scrollY > 20) {
nav.style.borderBottom = "5px solid dodgerblue";
} else {
nav.style.border = "0";
}
});

javascript game help pls [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
The game is able to get unlimited money by pressing the button. How do I prevent this?
var workbard = document.getElementById("workbar");
function work() {
var zaman = setInterval(function () {
workbard.value +=1;
if (workbard.value == 10) {
workbard.value -=11;
workbard.style.visibility = 'hidden'
clearInterval(zaman);
money = money +=5;
experience = experience +=10;
document.getElementById("para").innerHTML= ":" +money;
document.getElementById("exp").innerHTML=":" +experience;
}
<progress id="workbar" alue="0" max="10"></progress>
<button type ="button"id="workb2"onclick="work(),document.getElementById('workbar').style.visibility='visible'">Work</button>

you need to initialize some variables, add a limit and then use an if statement
var workbard = document.getElementById("workbar");
var money = 0;
var experience=0;
var limit = 30;
function work() {
var zaman = setInterval(function () {
workbard.value +=1;
if (workbard.value == 10) {
workbard.value -=11;
workbard.style.visibility = 'hidden'
clearInterval(zaman);
money = money +=5;
if(money > limit)money = limit;
experience = experience +=10;
document.getElementById("para").innerHTML= ":" +money;
document.getElementById("exp").innerHTML=":" +experience;
}})}
<progress id="workbar" alue="0" max="10"></progress>
<button type ="button"id="workb2"onclick="work(),document.getElementById('workbar').style.visibility='visible'">Work</button>
<div id='para'></div>
<div id='exp'></div>

How to repeat the same image a number of times in html? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I want to repeat an image-"box1" throughout the width of the page. I tried the following but it isn't working.
var count = $(window).width() / $("#box1").width();
for (var i = 1; i <= count; i++) {
var paragraph = document.getElementById("top-section");
paragraph.innerHTML += "<img src='images/box1.png' id='box1'html>";
}
#top-section {
float: left;
}
<div id="top-section"></div>

This one works fine for me.
Check it out...
Just clone element what u need and append it inside the section.
var count = $(window).width() / $(".box1").last().width();
for (var i = 1; i <= count; i++) {
$("#top-section").append($(".box1").last().clone(true));
}
#top-section {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top-section">
<img src="images/box1.png" class="box1">
</div>

How to change css class for multiple DOM elements with jQuery? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I am trying to change class property of an DOM element (specifically, for label tag) using jQuery 1.10.2.
Here is my code:
var MyNameSpace = MyNameSpace || {};
MyNameSpace.enableDisableLabels = (function() {
var m_labelIds = {
"bookId": "book",
"customerId": "customer"
};
var mf_getjQueryDOMObjectReperesentation = function(arrayObjIds) {
var result = {};
$.each(arrayObjIds, function(id, value) {
result[id] = $("#" + value);
});
return result;
};
var mf_unBoldLabels = function(arrayjQueryObjLabels) {
$.each(arrayjQueryObjLabels, function(id, value) {
value.atrr("class", "outputLabelOpt"); // PROBLEM: TypeError: value.atrr is not a function
});
};
var arrayjQueryObjLabels = mf_getjQueryDOMObjectReperesentation(m_labelIds);
mf_unBoldLabels(arrayjQueryObjLabels);
}());
.outputLabelOpt {
color: #0B63CA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<label id="book" style="font-weight:bold">book</label>
<label id="customer" style="font-weight:bold">customer</label>
</body>
But I get an error:
TypeError: value.atrr is not a function
Can you please advise what am I doing wrong and how to do it correctly.
Any kind of help is very much appreciated.
Thank you in advance,
mismas

Just a typo : it is not atrr, but attr ;-)

This is value.attr not .atrr.
For class attribute manipulation, you also have .addClass("classname") and .removeClass("classname").