I am programming a simple game in javascript and when the user hovers on the given coordinates it's score increases. My problem is the score does not increment after 1.
var x = Math.floor(Math.random() * 500) + 150;
var y = Math.floor(Math.random() * 500) + 150;
document.getElementById("demo2").innerHTML = y;
document.getElementById("demo1").innerHTML = x;
//live tracking of coordinates
$("div.frame").mousemove(function (event) {
var xco = event.clientX;
var yco = event.clientY;
var xcoor = "X co-ords: " + xco;
var ycoor = "Y co-ords: " + yco;
document.getElementById("display1").innerHTML = xcoor;
document.getElementById("display2").innerHTML = ycoor;
//keeping score
if (xco == x && yco == y) {
count++;
console.log(count);
document.getElementById("score").innerHTML = count;
generate();
}
//Generating Co-ordinates
function generate() {
var x = Math.floor(Math.random() * 500) + 150;
var y = Math.floor(Math.random() * 500) + 150;
document.getElementById("demo2").innerHTML = y;
document.getElementById("demo1").innerHTML = x;
function points(x, y) {
if (xco == x && yco == y) {
count++;
console.log(count);
document.getElementById("score").innerHTML = count;
generate();
}
}
points(x, y);
}
})
Even after adding a global count variable, your code is not working properly because of your if (xco == x && yco == y) condition fails after first run. Here you are comparing randomly generated x and y with xco, yco and updating score and calling generate again.
On your generate function you are creating new local variable x and y, not updating the global x and y. And the subsequent comparison (xco == x && yco == y) will fail because it still using the old x and y.
On your generate function, updating the global x and y should fix this issue,
x = Math.floor(Math.random() * 500) + 150;
y = Math.floor(Math.random() * 500) + 150;
Here is the complete code, I also made some minor changes, removed some redundant and duplicate codes
// Code goes here
$(document).ready(function(){
//on clicking let's play
var t = 120;
var count = 0;
$("button.play").click(function(event){
event.preventDefault();
$(".fadeout").fadeOut(2000, function(){
$(".heading").text("Click on the Start button when you're ready");
});
$(".hidden").attr("hidden", false);
});
function start(){
//init game timer
var Timer = setInterval(function(){
document.getElementById("time1").innerHTML = t;
--t;
if(t < 0){
clearInterval(Timer);
document.getElementById("timeout").innerHTML = "Time's Up |";
$("div.frame").attr("hidden",true);
}
},1000);
var x = Math.floor(Math.random()*500)+150;
var y = Math.floor(Math.random()*500)+150;
document.getElementById("demo2").innerHTML = y;
document.getElementById("demo1").innerHTML = x;
//live tracking of coordinates
$("div.frame").mousemove(function(event){
var xco = event.clientX;
var yco = event.clientY;
var xcoor = "X co-ords: " + xco;
var ycoor = "Y co-ords: " + yco;
document.getElementById("display1").innerHTML = xcoor;
document.getElementById("display2").innerHTML = ycoor;
//keeping score
points(xco, yco);
})
$("div.frame").mouseout(function(event){
document.getElementById("display1").innerHTML = " ";
document.getElementById("display2").innerHTML = " ";
})
//Generating Co-ordinates
function generate(){
x = Math.floor(Math.random()*500) + 150;
y = Math.floor(Math.random()*500) + 150;
document.getElementById("demo2").innerHTML = y;
document.getElementById("demo1").innerHTML = x;
}
function points(xco, yco){
if(x == xco && y == yco){
count++;
console.log(count);
document.getElementById("score").innerHTML = count;
generate();
}
}
}
$("button.start").click(function(event){
event.preventDefault();
start();
$(this).fadeOut(1500);
$(this).attr("disabled",true);
$(".afterstart").fadeOut(1500);
});
});
/* Styles go here */
body{
height: 1200px;
background-size: cover;
}
.jumbotron{
margin-top: 250px;
padding: 20px;
height: 350px;
background-size: cover;
background-attachment: fixed;
}
.heading{
font-size: 30px;
margin-top: 100px;
}
.frame{
height: 1000px;
width: 1500px;
border: 10px solid black;
}
ul {
background: #40475A;
padding: 10px;
width: 100%;
}
.stats{
font-size: 30px;
margin-top: 80px;
}
.info{
font-size: 30px;
color:aliceblue;
}
.bold{
font-size: 25px;
color:antiquewhite;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Irritate</title>
</head>
<body>
<div>
<ul class="nav nav-pills pl-5 fixed-top d-flex justify-content-center" style="font-size: 25px">
<li class="nav-item">
<a class="nav-link" data-toggle="pill" id="display1"></a>
</li>
<li class="nav-item">
<a class="nav-link" id="display2"></a>
</li>
</ul>
</div>
<div class="jumbotron fadeout">
<div class="display-3 text-muted d-flex justify-content-center"> Hand-Job </div>
<p class="info"> All you have to do is try to match the co-ordinates that will display on the screen </p>
<p class="bold"><kbd>PS:</kbd>This game will test your patience</p>
<form>
<div class="input-group w-75">
<div class="input-group-prepend">
<span class="input-group-text">Name:</span>
</div>
<input type="text" class="form-control" value="">
<div class="input-group-append">
<button class="btn btn-outline-success play">Let's Play</button>
</div>
</div>
</form>
</div>
<div class="hidden" hidden="true">
<div>
<p class="text-danger heading afterstart"></p>
<button class="btn btn-danger w-25 start">Start</button>
<div class="d-flex d-flex-inline stats">
<p class="ml-3">X Co-ordinate:<span id="demo1" class="ml-2"></span><span> | </span></p>
<p class="ml-3">Y Co-ordinate:<span id="demo2" class="ml-2"></span><span> | </span></p>
<p class="ml-3">Time Left:<span id="time1" class="ml-2"></span> <span> | </span></p>
<p id="timeout" class="ml-3"></p>
<p>Score: <span id="score"></span></p>
</div>
</div>
<div class="frame ml-2">
</div>
<p id="result"></p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Here is plunker url for the above code https://plnkr.co/edit/7ia7MkMimzlsAxTCWAc9?p=preview
i think its because your count variable is local and only live in if block if you want to have count in other place please declare it as global variable
var x = Math.floor(Math.random() * 500) + 150;
var y = Math.floor(Math.random() * 500) + 150;
document.getElementById("demo2").innerHTML = y;
document.getElementById("demo1").innerHTML = x;
var count = 0;
//live tracking of coordinates
$("div.frame").mousemove(function (event) {
...
})
Related
I made a square grid using HTML canvas and I am implementing a drag mechanism, such that the user can draw only rectangles by dragging over the grid.
In the below solution, the user can draw non-rectangle shapes, depending on how the user drags.
An additional question : The grid can be of any size and the drag operation is laggy for large rectangles. Any performance improvement suggestions for that ?
Here are my code of html and javascript
function getSquare(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: 1 + (evt.clientX - rect.left) - (evt.clientX - rect.left)%10,
y: 1 + (evt.clientY - rect.top) - (evt.clientY - rect.top)%10
};
}
function emptySquare(context) {
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#ffffff"
context.fill();
context.strokeStyle = "#ddd";
context.stroke();
}
function range(start, end) {
var ans = [];
if (end > start) {
for (let i = start; i <= end; i += 10) {
ans.push(i);
}
} else {
emptySquare(context);
for (let i = start; i >= end; i -= 10) {
ans.push(i);
}}
return ans;
}
function drawBoard(context) {
for (var x = 0.5; x < 20001; x += 10) {
context.moveTo(x, 0);
context.lineTo(x,20000);
}
for (var y = 0.5; y < 20001; y += 10) {
context.moveTo(0, y);
context.lineTo(20000, y);
}
context.strokeStyle = "#ddd";
context.stroke();
}
function fillSquare(context, x, y){
context.fillStyle = "#70B7B5";
context.fillRect(x,y,9,9);
}
var canvas = document.getElementById('myBoard');
var context = canvas.getContext('2d');
var A;
drawBoard(context);
var isDrag= false;
// drawBoard(context);
canvas.addEventListener('mousedown', function(evt) {
var mousePos = getSquare(canvas, evt);
isDrag=true;
fillSquare(context, mousePos.x, mousePos.y);
previousPos = mousePos;
}, false);
canvas.addEventListener('mousemove', function(evt) {
if (isDrag) {
var mousePos = getSquare(canvas, evt);
var x_dist = range(previousPos.x, mousePos.x);
var y_dist = range(previousPos.y, mousePos.y);
for (x in x_dist) {
for (y in y_dist) {
fillSquare(context, x_dist[x], y_dist[y]);
}
}
}
}, false);
canvas.addEventListener('mouseup', function(evt) {
if (isDrag){
isDrag = false;
}
}, false);
var canvas = document.getElementById('myBoard');
var context = canvas.getContext('2d');
// drawBoard(context);
var isDrag=false;
canvas.addEventListener('mousedown', function(evt) {
var mousePos = getSquare(canvas, evt);
isDrag=true;
fillSquare(context, mousePos.x, mousePos.y);
previousPos = mousePos;
}, false);
canvas.addEventListener('mousemove', function(evt) {
if (isDrag) {
var mousePos = getSquare(canvas, evt);
var x_dist = range(previousPos.x, mousePos.x);
var y_dist = range(previousPos.y, mousePos.y);
for (x in x_dist) {
for (y in y_dist) {
fillSquare(context, x_dist[x], y_dist[y]);
}
}
}
}, false);
canvas.addEventListener('mouseup', function(evt) {
if (isDrag){
isDrag = false;
}
}, false);
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/style.css">
<meta charset="utf-8">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">t</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="index.html">Home</a>
<a class="nav-link" href="#">About Us</a>
<a class="nav-link" href="Myblock.html">Mk</a>
</div>
<div class="navbar-nav ms-auto mb-2 mb-lg-0">
<a class="nav-link" href="login.html">Login</a>
</div>
</div>
</div>
</nav>
<div>
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">간판 구입</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form action="" method="POST" enctype="multipart/form-data">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="preview-zone hidden">
<div class="box box-solid">
<div class="box-header with-border">
<div><b>미리보기</b></div>
<!-- <div class="box-tools pull-right">
<button type="button" class="btn btn-danger btn-xs remove-preview">
<i class="fa fa-times"></i> 초기화
</button>
</div> -->
</div>
<div class="box-body"></div>
</div>
</div>
<div class="dropzone-wrapper">
<div class="dropzone-desc">
<i class="glyphicon glyphicon-download-alt"></i>
<p>광고 이미지 선택 or 드래그해 옮겨 오세요.</p>
</div>
<input type="file" name="img_logo" class="dropzone">
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">닉네임/이름</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="닉네임/이름">
<label for="exampleInputEmail1">연락처</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="핸드폰 번호">
<label for="exampleInputEmail1">구매희망 면적</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="ex) 10 x 10 OR 100x100 ">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
<button type="submit" class="btn btn-dark">적용하기</button>
</div>
</div>
</div>
</div>
<div>
<canvas id="myBoard" width="1440" height="1200"></canvas>
</div>
</hr>
<footer>
<p>© 2021 Nune Project</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="./assets/js/mainBoard.js"></script>
<script type="text/javascript" src="./assets/js/drag_field.js"></script>
</body>
The issue is being seen because range function is not clearing the squares when end > start. Clearing the squares in both the cases resolves the issue.
Here's the snippet that fixes the issue.
function range(start, end) {
var ans = [];
emptySquare(context);
if (end > start) {
for (let i = start; i <= end; i += 10) {
ans.push(i);
}
} else {
for (let i = start; i >= end; i -= 10) {
ans.push(i);
}
}
return ans;
}
The Lag Issue
The callback function attached to mousemove clears and draws squares on every invocation - a time consuming operation. Given that JavaScript is single threaded and this function is called at a very high rate, it might be the cause of the lag.
Debouncing the mousemove callback can help reducing the lag.
Another approach to solve the lag issue is to make two canvases: one for the background grid lines and the other one for drawing the green rectangles.
<div>
<canvas id="bg" width="1440" height="1200"></canvas>
<canvas id="myBoard" width="1440" height="1200"></canvas>
</div>
Set the #bg canvas so that #myBoard is in front of it:
#bg {
position: absolute;
z-index: -1;
}
Then draw the grid lines on the #bg canvas:
const bg = document.getElementById('bg')
const bgContext = bg.getContext('2d')
drawBoard(bgContext)
Finally, move the emptySquare(context) function into the mousemove event callback and edit it as follows:
function emptySquare(context) {
context.clearRect(0, 0, canvas.width, canvas.height)
}
So it will only clear the #myBoard canvas while #bg stays the same without needing to redraw it each time.
Example:
const bg = document.getElementById('bg')
const bgContext = bg.getContext('2d')
drawBoard(bgContext)
function getSquare(canvas, evt) {
var rect = canvas.getBoundingClientRect()
return {
x: 1 + (evt.clientX - rect.left) - ((evt.clientX - rect.left) % 10),
y: 1 + (evt.clientY - rect.top) - ((evt.clientY - rect.top) % 10),
}
}
function emptySquare(context) {
context.clearRect(0, 0, canvas.width, canvas.height)
}
function range(start, end) {
var ans = []
if (end > start) {
for (let i = start; i <= end; i += 10) {
ans.push(i)
}
} else {
for (let i = start; i >= end; i -= 10) {
ans.push(i)
}
}
return ans
}
function drawBoard(context) {
for (var x = 0.5; x < 20001; x += 10) {
context.moveTo(x, 0)
context.lineTo(x, 20000)
}
for (var y = 0.5; y < 20001; y += 10) {
context.moveTo(0, y)
context.lineTo(20000, y)
}
context.strokeStyle = '#ddd'
context.stroke()
}
function fillSquare(context, x, y) {
context.fillStyle = '#70B7B5'
context.fillRect(x, y, 9, 9)
}
var canvas = document.getElementById('myBoard')
var context = canvas.getContext('2d')
var isDrag = false
canvas.addEventListener('mousedown', function(evt) {
var mousePos = getSquare(canvas, evt)
isDrag = true
fillSquare(context, mousePos.x, mousePos.y)
previousPos = mousePos
}, false)
canvas.addEventListener('mousemove', function(evt) {
if (isDrag) {
var mousePos = getSquare(canvas, evt)
var x_dist = range(previousPos.x, mousePos.x)
var y_dist = range(previousPos.y, mousePos.y)
emptySquare(context)
for (x in x_dist) {
for (y in y_dist) {
fillSquare(context, x_dist[x], y_dist[y])
}
}
}
}, false)
canvas.addEventListener('mouseup', function(evt) {
if (isDrag) {
isDrag = false
}
}, false)
#bg {
position: absolute;
z-index: -1;
}
<div>
<canvas id="bg" width="1440" height="1200"></canvas>
<canvas id="myBoard" width="1440" height="1200"></canvas>
</div>
Task:
I created a shape with 4 buttons, and need it to move to 4 directions depending on the button clicked (pure JS).
This is what I created - check out the snippet.
Problem:
Left/Right directions work great, but Up/Down do not.
Any idea why? Looks like both directions are identical. :/
Thanks a lot for your help, much appreciated!
var shape = document.getElementById("shape"),
leftBtn = document.getElementById("leftBtn"),
rightBtn = document.getElementById("rightBtn"),
upBtn = document.getElementById("upBtn"),
downBtn = document.getElementById("downBtn");
leftBtn.onclick = function(){
moveLeft();
}
rightBtn.onclick = function(){
moveRight();
}
upBtn.onclick = function(){
moveUp();
}
downBtn.onclick = function(){
moveDown();
}
function moveLeft() {
var val = (parseInt(shape.style.left) || 0) - 50;
shape.style.left = val + "px";
}
function moveUp() {
var val = (parseInt(shape.style.top) || 0) - 50;
shape.style.left = val + "px";
}
function moveRight() {
var val = (parseInt(shape.style.left) || 0) + 50;
shape.style.left = val + "px";
}
function moveDown() {
var val = (parseInt(shape.style.top) || 0) + 50;
shape.style.left = val + "px";
}
body{
background-color: black;
}
#shape{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
}
<html>
<head>
<title>JavaScript and the Document Object Model</title>
<link rel="stylesheet" type="text/css" href="shape.css">
</head>
<body>
<div id="container">
<div id="shape">
</div>
<div id="buttons">
<button class="button" id="leftBtn" direction="left">left</button>
<button class="button" id="upBtn" direction="up">up</button>
<button class="button" id="downBtn" direction="down">down</button>
<button class="button" id="rightBtn" direction="right">right</button>
</div>
</div>
<script type="text/javascript" src="shape.js"></script>
</body>
</html>
As pointed by #Temani, in functions moveUp and moveDown, changing shape.style.left to shape.style.top will solve the problem.
var shape = document.getElementById("shape"),
leftBtn = document.getElementById("leftBtn"),
rightBtn = document.getElementById("rightBtn"),
upBtn = document.getElementById("upBtn"),
downBtn = document.getElementById("downBtn");
leftBtn.onclick = function(){
moveLeft();
}
rightBtn.onclick = function(){
moveRight();
}
upBtn.onclick = function(){
moveUp();
}
downBtn.onclick = function(){
moveDown();
}
function moveLeft() {
var val = (parseInt(shape.style.left) || 0) - 50;
shape.style.left = val + "px";
}
function moveUp() {
var val = (parseInt(shape.style.top) || 0) - 50;
shape.style.top = val + "px";
}
function moveRight() {
var val = (parseInt(shape.style.left) || 0) + 50;
shape.style.left = val + "px";
}
function moveDown() {
var val = (parseInt(shape.style.top) || 0) + 50;
shape.style.top = val + "px";
}
body{
background-color: black;
}
#shape{
background-color: red;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
}
<html>
<head>
<title>JavaScript and the Document Object Model</title>
<link rel="stylesheet" type="text/css" href="shape.css">
</head>
<body>
<div id="container">
<div id="shape">
</div>
<div id="buttons">
<button class="button" id="leftBtn" direction="left">left</button>
<button class="button" id="upBtn" direction="up">up</button>
<button class="button" id="downBtn" direction="down">down</button>
<button class="button" id="rightBtn" direction="right">right</button>
</div>
</div>
<script type="text/javascript" src="shape.js"></script>
</body>
</html>
This question already has answers here:
Calculate color HEX having 2 colors and percent/position
(4 answers)
Closed 5 years ago.
I want to create a simple HTML rating bar. My rating bar got has a dynamic number of containers. For example 5:
And I need to calculate the color values [first+2,last-1]. The first and last colors are given.
$(document).ready(function() {
ratingElements = $(".ratingEle"); // Find all rating containers
ratingColors.push(initialColorDefault); // if not selected, set the container to gray // index 0
ratingColors.push(initialColorMin); // red color // index 1
// !! Calculate the missing colors here !!
// from index 2 to ratingColors.length - 1
// ratingColors.push("#" + hexValue);
updateRatingBar(0); // set all containers to gray
$(ratingElements).each(function(index, element) { // add some event handlers to the containers
var ele = $(element);
var i = index + 1;
ele.click(function() {
setRating(i);
});
ele.hover(function() {
updateRatingBar(i);
});
});
});
var ratingElements;
var ratingColors = [];
var initialColorDefault = "#cccccc"; // pre set colors
var initialColorMin = "#ff0000";
var initialColorMax = "#80ff00";
function setRating(currentValue) { // click handler
$("#ratingOutput").html(currentValue + " / " + ratingElements.length);
updateRatingBar(currentValue);
}
function updateRatingBar(currentValue) { // set colors
$(ratingElements).each(function(index, element) {
var i = index;
if (i > currentValue) {
i = 0;
}
$(element).css('background-color', ratingColors[i]);
});
}
.ratingEle {
float: left;
cursor: pointer;
height: 10px;
width: 30px;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rating">
<div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
</div>
<div>
<p id="ratingOutput"></p>
</div>
</div>
So as you can see, I need to calculate the colors to make it work. I set a missing part in my JS file and need help, calculating it.
I don't know if I should go for hex or rgb values.
When hovering over the containers the colors should get updated automatically. When clicking a container, it should set a value.
But I already archieved this I just need to calculate the missing color range.
With this answer as base
$(function() {
var color1 = 'ff0000';
var color2 = '80ff00';
var ratio = 1 / $('.ratingEle').length;
var hex = function(x) {
x = x.toString(16);
return (x.length == 1) ? '0' + x : x;
};
$i=1;
$('.ratingEle').each(function() {
var r = Math.ceil(parseInt(color1.substring(0,2), 16) * (ratio*$i) + parseInt(color2.substring(0,2), 16) * (1-(ratio*$i)));
var g = Math.ceil(parseInt(color1.substring(2,4), 16) * (ratio*$i) + parseInt(color2.substring(2,4), 16) * (1-(ratio*$i)));
var b = Math.ceil(parseInt(color1.substring(4,6), 16) * (ratio*$i) + parseInt(color2.substring(4,6), 16) * (1-(ratio*$i)));
var color = hex(r) + hex(g) + hex(b);
$(this).css('background-color', '#'+color);
$i++;
});
});
.ratingEle {
float: left;
cursor: pointer;
height: 10px;
width: 30px;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rating">
<div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
</div>
<div>
<p id="ratingOutput"></p>
</div>
</div>
with more elements
$(function() {
var color1 = 'ff0000';
var color2 = '80ff00';
var ratio = 1 / $('.ratingEle').length;
var hex = function(x) {
x = x.toString(16);
return (x.length == 1) ? '0' + x : x;
};
$i=1;
$('.ratingEle').each(function() {
var r = Math.ceil(parseInt(color1.substring(0,2), 16) * (ratio*$i) + parseInt(color2.substring(0,2), 16) * (1-(ratio*$i)));
var g = Math.ceil(parseInt(color1.substring(2,4), 16) * (ratio*$i) + parseInt(color2.substring(2,4), 16) * (1-(ratio*$i)));
var b = Math.ceil(parseInt(color1.substring(4,6), 16) * (ratio*$i) + parseInt(color2.substring(4,6), 16) * (1-(ratio*$i)));
var color = hex(r) + hex(g) + hex(b);
$(this).css('background-color', '#'+color);
$i++;
});
});
.ratingEle {
float: left;
cursor: pointer;
height: 10px;
width: 30px;
margin-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rating">
<div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
<div class="ratingEle"></div>
</div>
<div>
<p id="ratingOutput"></p>
</div>
</div>
I have created a script that converts the HTML value from an element into a percentage, the percentage value then determines the width of another element (in this case a bar).
This is all well and good for a single element (as you will see), however, does not work when I have an element echoing through a page. Can I be pointed in the right direction here?
Current JS Fiddle: http://jsfiddle.net/ctalke/27no66rm/
//==================================== Bar Percentage Start ================================//
var a = document.getElementsByClassName('term')[0].innerHTML;
var b = document.getElementsByClassName('age')[0].innerHTML;
var c = 100;
var d = b / a;
var e = d * c;
document.getElementsByClassName('barv')[0].style.width = Math.round(e) + '%';
document.getElementsByClassName('barv')[0].innerHTML = Math.round(e) + '%';
//==================================== Bar Percentage End =================================//
//===================================== Bar Colour Start ==================================//
var a1 = document.getElementById("barv");
if (e < 50) {
a1.className += " green";
} else if (e < 99) {
a1.className += " yellow";
} else {
a1.className += " red";
}
//===================================== Bar Colour End ==================================//
.bar {
text-align: center;
height: 20px;
border: 1px solid black;
color: white;
}
.hide {
display: none;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
color: black!important;
}
.green {
background-color: green;
}
<!-- Term -->
<div class="term hide">36</div>
<!-- Age -->
<div class="age hide">35</div>
<!-- Progress Bar -->
<div class="bar barv red"></div>
<br>
<!-- Term 1 -->
<div class="term hide">36</div>
<!-- Age 1 -->
<div class="age hide">2</div>
<!-- Progress Bar 1 -->
<div class="bar barv yellow"></div>
<br>
<!-- Term 2 -->
<div class="term hide">36</div>
<!-- Age 2 -->
<div class="age hide">15</div>
<!-- Progress Bar 2 -->
<div class="bar barv green"></div>
You just need to iterate over the snippet using a for loop instead.
var bars = document.getElementsByClassName('bar');
for (i = 0; i < bars.length; i++) {
// Your code here
}
And replace [0] with [i]
//==================================== Bar Percentage Start ================================//
var bars = document.getElementsByClassName('bar');
for (i = 0; i < bars.length; i++) {
var a = document.getElementsByClassName('term')[i].innerHTML;
var b = document.getElementsByClassName('age')[i].innerHTML;
var c = 100;
var d = b / a;
var e = d * c;
document.getElementsByClassName('barv')[i].style.width = Math.round(e) + '%';
document.getElementsByClassName('barv')[i].innerHTML = Math.round(e) + '%';
//==================================== Bar Percentage End =================================//
//===================================== Bar Colour Start ==================================//
var a1 = document.getElementsByClassName("barv")[i];
if (e < 50) {
a1.className += " green";
} else if (e < 99) {
a1.className += " yellow";
} else {
a1.className += " red";
}
}
//===================================== Bar Colour End ==================================//
.bar {
text-align: center;
height: 20px;
border: 1px solid black;
color: white;
}
.hide {
display: none;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
color: black!important;
}
.green {
background-color: green;
}
<!-- Term -->
<div class="term hide">36</div>
<!-- Age -->
<div class="age hide">35</div>
<!-- Progress Bar -->
<div class="bar barv red"></div>
<br>
<!-- Term 1 -->
<div class="term hide">36</div>
<!-- Age 1 -->
<div class="age hide">2</div>
<!-- Progress Bar 1 -->
<div class="bar barv yellow"></div>
<br>
<!-- Term 2 -->
<div class="term hide">36</div>
<!-- Age 2 -->
<div class="age hide">15</div>
<!-- Progress Bar 2 -->
<div class="bar barv green"></div>
You can reduce the repetition of same selectors by caching them in a variable instead.
//==================================== Bar Percentage Start ================================//
var bars = document.querySelectorAll('.bar');
for (i = 0; i < bars.length; i++) {
var bar = bars[i];
var term = document.querySelectorAll('.term')[i];
var age = document.querySelectorAll('.age')[i];
var a = term.innerHTML;
var b = age.innerHTML;
var c = 100;
var d = b / a;
var e = d * c;
bar.style.width = Math.round(e) + '%';
bar.innerHTML = Math.round(e) + '%';
//==================================== Bar Percentage End =================================//
//===================================== Bar Colour Start ==================================//
if (e < 50) {
bar.classList.add("green");
} else if (e < 99) {
bar.classList.add("yellow");
} else {
bar.classList.add("red");
}
}
//===================================== Bar Colour End ==================================//
I might be misreading your question, but are you asking about looping through all of the elements? If you're trying to do something to more than 1 element, try something like this
const arrayOfElements1 = document.querySelectorAll('yourCSSselectorGoesHere');
const arrayOfElements2 = document.querySelectorAll('yourCSSselectorGoesHere');
for (let i = 0; i < arrayOfElements.length; i += 1) {
arrayOfElements1[i].doStuff;
}
In the doStuff above you can do arrayOfElements1[i].innerHTML / arrayOfElements2[i].innerHTML * 100. I'm not entirely clear on what you're needing so let me know if I've misunderstood.
Just put your code in a for loop.
var barvs = document.getElementsByClassName("barv");
for (var index=0; index<barvs.length ;index++) {
var a = document.getElementsByClassName('term')[index].innerHTML;
var b = document.getElementsByClassName('age')[index].innerHTML;
var c = 100;
var d = b / a;
var e = d * c;
barvs[index].style.width = Math.round(e) + '%';
barvs[index].innerHTML = Math.round(e) + '%';
var a1 = barvs[index];
if (e < 50) {
a1.className += " green";
} else if (e < 99) {
a1.className += " yellow";
} else {
a1.className += " red";
}
}
I need to make an infinite wall which will pull text from database and show it on the wall. I have written this code -
$(function() {
var x = 0;
var y = 100.0;
var z=0;
setInterval(function() {
x -= 0.1;
y -= 0.1;
z++;
if (x <= -100.0){
$("#h1d1").html("loop div 1 :" + z);
x = 0;
}
if (y <= 0){
$("#h1d2").html("loop div 2 :" + z);
y = 100.0;
}
$('#movimg1').css('left', x + "%");
$('#movimg2').css('left', y + "%");
}, 10);
$("#stopbutton").click(function() {
$('#movimg1').stop();
});
})
But the text are not behaving as I wanted it to behave. It changes in the middle of the screen which I don't want. I need the text to change when it is out of view.
https://jsfiddle.net/oa0wdxcx/2/
A couple more things- I want to add a play/pause button. Any advice on how I could achieve that would be much appreciated. Also I want the divs to be inside #wrap div, but if I change the position attribute to relative, the divs don't remain together.
Thanks in advance.
The problem was in the conditions.
if (x <= -100.0) {
z++;
$("#h1d1").html("loop div 1 :" + z);
x = 100; /* change this line */
}
if (y <= -100.0) { /* change this line */
w++;
$("#h1d2").html("loop div 2 :" + w);
y = 100;
}
the conditions says that if any of these two divs reaches left:-100% then the element must place at the end of queue at left:100%.
And one other thing you can combine these if statements and only use x to do the transition.
For start and stop button to work, you should kill the simulation to stop by using clearInterval() function, and call doSimulate() to start again:
var started = true;
$("#stopbutton").click(function () {
if(started) {
clearInterval(sim);
$(this).html('Start');
started = false;
}else{
doSimulate();
$(this).html('Stop');
started = true;
}
});
Here is jsFiddle With Start/Stop Working.
Look at this JSFiddle, i added one more to get a smooth transition back to start.. The third should contain same message as first.
HTML
<body>
<div class="row">
<div class="col-xs-1"></div>
<div id="wrap" class="col-xs-10">
<div class="movimg message1" id="movimg1">
<h1 class="header">start div 1</h1>
</div>
<div class="movimg message2" id="movimg2">
<h1 class="header">start div 2</h2>
</div>
<div class="movimg message1" id="movimg3">
<h1 class="header">start div 1</h1>
</div>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row">
<button class="button" id="startbutton" style="display:none;">Start</button>
<button class="button" id="stopbutton">Stop</button>
</div>
</body>
JavaScript
$(function () {
var x = 200.0;
var interval;
function start(){
interval = setInterval(function () {
x -= 0.1;
if (x <= 0.0) {
x = 200;
}
$('#movimg1').css('left', (x-200) + "%");
$('#movimg2').css('left', (x-100) + "%");
$('#movimg3').css('left', x + "%");
}, 10);
}
start();
$("#stopbutton").click(function () {
window.clearInterval(interval);
$(this).hide();
$("#startbutton").show();
});
$("#startbutton").click(function () {
start();
$(this).hide();
$("#stopbutton").show();
});
})
CSS
body {
overflow: hidden;
}
#wrap {
width: 80%;
left: 10%;
}
.movimg{
position: absolute;
height: 600px;
width: 100%;
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/89/ed/e5/89ede56bcc8243787e55676ab28f287f.jpg');
}
#movimg1 {
left: 0%;
}
#movimg2 {
left: 100%;
}
#movimg3 {
left: 200%;
}
.header {
text-align: center;
}
.button{
top: 600px;
position: relative;
}
UPDATE
Now with Stop and Start buttons: JSFiddle