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>
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 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;
}
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>
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 3 years ago.
Improve this question
I’m making a game using HTML, CSS, and JavaScript. When I click the left arrow, the red and yellow box jerks to the original position and runs. I want it to run at the position it is at currently at. Same goes for double tapping the arrows.
I’ve attached a Repl.it. Here it is: https://repl.it/#ritzcrackerz201/cake
Below I have edited your script, Your main issue was you were using two different values for your left and right movement... Also i don't know if this is what you wanted but I made edits to your 'jump' section of code.
Javascript
<script>
let xArrowMovement = 0;
let jumpboxupmovementy = 0;
// let player = null;
// let playerPos = null;
/*setTimeout(function(){
getElements();
}, 100);
function getElements() {
console.log('Entered getElements');
player = document.getElementById("master-cube");
console.log(player);
playerPos = player.style.transform;
console.log(playerPos);
} */
function moveright() {
console.log('Entered moveright');
xArrowMovement += 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${jumpboxupmovementy}%)`;
}
function moveleft() {
console.log('Entered moveleft');
xArrowMovement -= 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${jumpboxupmovementy}%)`;
}
function movejump() {
console.log('Entered movejump: ' + xArrowMovement + ' ' + jumpboxupmovementy);
jumpboxupmovementy += 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${-jumpboxupmovementy}%)`;
//wait for this animation to complete
setTimeout(function(){
jumpboxupmovementy -= 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${jumpboxupmovementy}%)`;
}, 500);
}
</script>
HTML
<div id="master-cube"></div>
<img src="arrows/leftarrow.png" alt="Left Arrow" height="80vh" width="80vw" onclick="moveleft()" class="arrowcontrols">
<img src="arrows/middlejumpsquare.png" alt="Jump Square" height="80vh" width="80vw" onclick="movejump()" class="arrowcontrols">
<img src="arrows/rightarrow.png" alt="Right Arrow" height="80vh" width="80vw" onclick="moveright()" class="arrowcontrols">
</body>
Use translate( 0, 0 ) instead of translateX( 0 ), translateY( 0 ). And use one value of x instead of leftarrowmovement and rightarrowmovelock. Now after clicking left function doesn't consider your movement to the right.
But as stated in #Marc's comment, you should use some kind of engine for that. CSS is not the best tool in development of such games.
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
Why does this jQuery event only fire once?
$(document).on('keyup', '[data-behavior="oneliner-text-area"]', function (event) {
var textLength = $(this).length;
var textLengthLimit = 140;
$('[data-behavior="oneliner-counter"]').html(textLengthLimit - textLength);
if ((textLengthLimit - textLength) < 0) {
$('[data-behavior="oneliner-counter').addClass('oneliner-count-warning');
}
});
You are not counting textfield's text length, you are counting number of elements, and that is it always be 1 so you will always get 139.
$(document).on('keyup', '[data-behavior="oneliner-text-area"]', function (event) {
var textLength = $(this).val().length; // Here is a change
var textLengthLimit = 140;
$('[data-behavior="oneliner-counter"]').html(textLengthLimit - textLength);
if ((textLengthLimit - textLength) < 0) {
$('[data-behavior="oneliner-counter').addClass('oneliner-count-warning');
}
});
I think, this is what you try to do:
$(document).on('ready', function() {
$doc = $(document);
var textProps = {
textLength: 0, // your text length,
textLengthLimit: 140, // your text limit
charsLeft: function() { // check how characters left
return this.textLengthLimit - this.textLength;
},
isLengthValid: function() { // check if text is valid
return this.textLengthLimit - this.textLength > 0;
}
};
$('.txtLimit').text(textProps.charsLeft());
$doc.on('keyup', '[data-behavior="oneliner-text-area"]', function(e) {
var $self = $(this);
textProps.textLength = $self.val().length;
$('.txtLimit').text(textProps.charsLeft());
var success = 'oneliner-count-success',
warning = 'oneliner-count-warning';
if (!textProps.isLengthValid()) {
$self.removeClass(success).addClass(warning);
} else {
$self.removeClass(warning).addClass(success);
}
});
});
.oneliner-count-warning {
color: red !important;
}
.oneliner-count-success {
color: green !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="form-group col-xs-8">
<label for="myInp">Input with validation:</label>
<input type="text" class="form-control" data-behavior="oneliner-text-area" id="myInp">
<small>Characters left: <b class="txtLimit"></b></small>
</div>
</div>