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;
}
Related
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 3 years ago.
Improve this question
I have this simple function that is just simply supposed to toggle the background color of a button from aqua to red and back again. However, when I call this function, all it does is change it to red and I'm not sure why. I have looked at other similar examples on here and I feel like I'm doing it correctly. Would love some help!
<button id = "button1" onclick="myFunction()">This is a button</button>
button {
background-color: Aqua;
}
function myFunction() {
if (document.getElementById("button1").style.backgroundColor === "Aqua"){
document.getElementById("button1").style.backgroundColor = "Red";
document.getElementById("button1").innerHTML = "I'm RED!!";
} else {
document.getElementById("button1").style.backgroundColor = "Aqua";
document.getElementById("button1").innerHTML = "I'm back BABY!!";
}
}
it works like this
if ($("#yourselector").css('background-color')=="rgb(220,
20, 60)") alert("matched");
you need to convert name to red, green, blue components, you might use this tool
http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php
The simplest wya to do this is to pass this into your onclick() function and use a ternary operator to determine the toggle state.
function myFunction(btn) {
const isRed = btn.style.backgroundColor === "red";
btn.style.backgroundColor = isRed ? "aqua" : "red";
btn.innerHTML = isRed ? "I'm back BABY!!" : "I'm RED!!";
}
button {
background-color: aqua;
}
<button id="button1" onclick="myFunction(this)">This is a button</button>
the first if statement should have lowercase aqua.. like the following
function myFunction() {
if (document.getElementById("button1").style.backgroundColor === "aqua") {
document.getElementById("button1").style.backgroundColor = "red";
document.getElementById("button1").innerHTML = "I'm RED!!";
} else {
document.getElementById("button1").style.backgroundColor = "aqua";
document.getElementById("button1").innerHTML = "I'm back BABY!!";
}
}
I found out by doing
console.log(document.getElementById("button1").style); and in the log you will have the object where you can unfold and find that the css selector is in lowercase,
also make red the same to avoid confusion.
hope it helps
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
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.
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.
Improve this question
So the red traffic light shows up and then when the next light button is pressed the light doesn't change and I can't for the life of me figure out why. I would appreciate any help. Here's the code:
<!DOCTYPE html>
<html>
<body>
<img id="thestartlight" src="file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-red.jpg">
<button type="button" onclick="nextLightClick()">Next Light</button>
<script>
var list = [
"file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-red.jpg.html"
"file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-amber.jpg",
"file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-green.jpg",
"file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-red.jpg"
];
var index = 0;
var lightsLen = lights.length;
function nextLightClick() {
index++;
if (index == lightsLen)
index = 0;
var image = document.getElementById('thestartlight');
image.src = lights[index];
}
</script>
</body>
</html>
There are 3 problems.
1) it's list have to be lights
2) better put images to images/lights/ folder in relative to Your code folder.
3) html file cannot be shown in image tag
Here is the fix:
var lights = [
"images/lights/amber.jpg",
"images/lights/green.jpg",
"images/lights/red.jpg"
];
var index = 0;
var lightsLen = lights.length;
It's a typo..
var list = [ ...
should be
var lights [ ...
You named your array list, but you are seeking the images from lights.
You also need to remove the .html file from the array.
var image = document.getElementById('thestartlight');
var lights = [
"http://archive.nassaucountyny.gov/agencies/TPVA/Images/RedLight-2_145x193.jpg",
"http://www.clker.com/cliparts/2/1/1/6/N/W/amber-traffic-light.svg",
"http://www.clker.com/cliparts/6/e/9/d/11949849761176136192traffic_light_green_dan__01.svg"
];
var index = 0;
var lightsLen = lights.length;
function nextLightClick() {
index++;
if (index == lightsLen){
index = 0;
}
image.src = lights[index];
}
img {width:50px;}
<img id="thestartlight" src="http://archive.nassaucountyny.gov/agencies/TPVA/Images/RedLight-2_145x193.jpg">
<button type="button" onclick="nextLightClick()">Next Light</button>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
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.
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.
Improve this question
I can't seem to get this to work. I am including a javascript file with functions in it, but one of the functions in the file I want to be defined inside the main HTML file, not the javascript file. This isn't working however.
Here's what I want:
//testFile.js
$(function() {
$(window).scroll(function() {
var Scroll = $(window).scrollTop();
var Width = $(window).width();
var Height = $(window).height();
var Offset;
doParallax();
});
function Parallax(Obj, /*OffX, OffY,*/ ModifierX, ModifierY, Wait) {
var ScrollT = $(window).scrollTop();
var ScrollL = $(window).scrollLeft();
var OffsetY = ScrollT - $(Obj).data("InitialTopOffset");
var OffsetX = ScrollL - $(Obj).data("InitialLeftOffset");
var SpeedX = OffsetX*ModifierX + XOff;
var SpeedY = OffsetY*ModifierY + YOff;
if (Wait) {
if (ScrollT >= $(Obj).data("InitialTopOffset")) {
$(Obj).stop(true, false).css( "background-position", (ScrollL+SpeedX) + "px " + (-OffsetY-SpeedY) + "px", 50, "linear");
}
}
else {
$(Obj).stop(true, false).css( "background-position", (ScrollL+SpeedX) + "px " + (-OffsetY-SpeedY) + "px", 50, "linear");
}
}
});
//
//main HTML file
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function doParallax() {
XOff = ( $(window).width() - ( $(window).width()*0.9 ) ) / 2;
Parallax(".parallax3", 0, -0.55, true);
}
</script>
<script src="testFile.js"></script>
</head>
<body>
...
</body>
</html>
I haven't been able to find anything from doing google searches or from searching on Stack Exchange. But assuming that it isn't working means that I can't do this, but is there a way to achieve the desired result?
EDIT: Actual code examples
This is invalid:
<script src="testFile.js">
function somethingElse() {
alert("Called");
}
</script>
A script tag either references a script or contains a script. Not both. Separate them into their own tags:
<script src="testFile.js"></script>
<script>
function somethingElse() {
alert("Called");
}
</script>
(Of course, this is ignoring the fact that the contrived example never calls doSomething(), but I assume that's just an oversight in the example.)
Note also that there may be a scope issue depending on when you call this function. If doSomething() is invoked before somethingElse() is in scope, that could be a problem. You may be able to hoist it to the top of the current scope by defining it like this though:
var somethingElse = function() {
alert("Called");
}
Not sure if that's even an issue here though, since the code in the question doesn't actually invoke any functions.
Edit: Since the question has drastically changed...
In a comment above you mention the problem:
The console is actually now saying that Parallax() is not defined.
This is because that function exists only within the scope of the function you're using in the document.ready handler. To simplify:
$(function () {
// anything created here only exists here
});
// so you can't call it here
If you have functions which need to be invoked outside that scope, define them outside of that scope:
$(function () {
// perform document ready handler actions here
});
var Parallax = function() {
//...
}
var doParallax = function() {
//...
}
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").
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Believe me the HTML won't be necessary on this one since the if statement only deals with the cBox variable. What this does is, create or close a div upon clicking a button, i've tested the functions and they work, what's not working however is the way these functions are called, I've logged the outputs but i get neither of them displayed in the console, this means the code is not running through the if statement for some reason.
Also tried with if (cBox == null) and it doesn't work ...
btnPress.onclick = function formConfirm() {
var cBox = document.getElementById('cBox');
console.log(" but cbox is "+cBox);
if(cBox) {
closecBox();
console.log("cbox exists, closing ...");
} else {
opencBox();
console.log("cbox does not exist, creating...");
}
};
I am not sure i understand your question but if your code is like this seems to work fiddle
function closeBox(elem){
elem.parentNode.removeChild(elem);
}
function openBox(el){
var el = document.createElement('div');
el.setAttribute("id", "cBox");
document.body.appendChild(el);
}
var btnPress = document.getElementById('button');
btnPress.onclick = function formConfirm() {
var cBox = document.getElementById('cBox');
if(cBox) {
closeBox(cBox)
console.log("cbox exists, closing ...");
} else {
openBox(cBox);
console.log("cbox does not exist, creating...");
}
};
If i did not understand your question sorry for having done wasting time.
Guys thank you for all the replies, your hints were definitely helpful for solving this problem, i made so many changes that i lost track but this is the working code
var btnPress = document.getElementById('theBtn');
btnPress.onclick = function formConfirm() {
var cBox = document.getElementById('confirmBox');
console.log("cbox is "+cBox);
if(cBox) {
console.log("cbox exists, closing ...");
closecBox();
} else {
opencBox();
console.log("cbox does not exist, creating...");
}
};
function opencBox() {
var cBox = document.createElement('div');
cBox.id = "confirmBox";
document.body.appendChild(cBox);
cBox.style.display="inline";
};
function closecBox() {
var cBox = document.getElementById('confirmBox');
cBox.style.display="none";
document.body.removeChild(cBox);
};
I also used display style to test some other stuff with animations :) once again, thank you so much for all the comments! They really helped me out figuring the solution!