Develop Reference

How to embed this javascrip into Mathematica with a single input

In my research, I need to generate Fricke Polynomials. Luckily the job has been done for me on a website. However, it is in javascript+html+css so I am not sure how it works as I only use Mathematica. I was wondering if anyone could explain how I could make all of this work on a single javascript code with a single input (and where to put the input). My plan is then to just take the code and embed it in Mathematica as I have seen this is possible. The input is a word say made up of a's and b's say aabbbaa and an output is a polynomial. I do not need to understand the code really.
Thank you
function Polynomial(){
this.data = "";
this.setData = function(str){
this.data = str;
}
this.toString = function(){
var s = this.data;
if (this.data.startsWith("x0y0z0"))
s = s.replace("x0y0z0", "1");
s = s.replace(/x0y0z0/g, "")
.replace(/\s\+\s-/g, "</sup> - ").replace(/\s\+/g, "</sup> +")
.replace(/x/g, "x<sup>").replace(/y/g, "</sup>y<sup>")
.replace(/z/g, "</sup>z<sup>")
.replace(/\s1x/g, " x").replace(/\s1y/g, " y").replace(/\s1z/g, " z");
s += "</sup>";
s = s.replace(/x<sup>0<\/sup>/g, "").replace(/y<sup>0<\/sup>/g, "")
.replace(/z<sup>0<\/sup>/g, "")
.replace(/x<sup>1<\/sup>/g, "x").replace(/y<sup>1<\/sup>/g, "y")
.replace(/z<sup>1<\/sup>/g, "z");
if (s.startsWith("1x"))
s = s.replace("1x", "x");
if (s.startsWith("1y"))
s = s.replace("1y", "y");
if (s.startsWith("1z"))
s = s.replace("1z", "z");
return s;
}
}
function compareMonomial(m1, m2){
m1s = m1.split(/[x|y|z]/g);
m2s = m2.split(/[x|y|z]/g);
if (m1s[3]< m2s[3]) return -1;
else if (m1s[3] > m2s[3]) return 1;
else if (m1s[2]< m2s[2]) return -1;
else if (m1s[2] > m2s[2]) return 1;
else if (m1s[1]< m2s[1]) return -1;
else if (m1s[1] > m2s[1]) return 1;
else return 0;
}
function addMonomial(m1, m2){
m1s = m1.split(/[x|y|z]/g);
m2s = m2.split(/[x|y|z]/g);
coef = parseInt(m1s[0]) + parseInt(m2s[0]);
if (coef == 0)
return "ZERO"
else
return coef + "x" + m1s[1] + "y" + m1s[2] + "z" + m1s[3];
}
function subMonomial(m1, m2){
m1s = m1.split(/[x|y|z]/g);
m2s = m2.split(/[x|y|z]/g);
coef = parseInt(m1s[0]) - parseInt(m2s[0]);
if (coef == 0)
return "ZERO";
else
return coef + "x" + m1s[1] + "y" + m1s[2] + "z" + m1s[3];
}
function mulMonomial(m1, m2){
m1s = m1.split(/[x|y|z]/g);
m2s = m2.split(/[x|y|z]/g);
coef = parseInt(m1s[0]) * parseInt(m2s[0]);
coefx = parseInt(m1s[1]) + parseInt(m2s[1]);
coefy = parseInt(m1s[2]) + parseInt(m2s[2]);
coefz = parseInt(m1s[3]) + parseInt(m2s[3]);
if (coef == 0)
return "ZERO";
else
return coef + "x" + coefx + "y" + coefy + "z" + coefz;
}
function add(p1, p2){
if (p1.data == "")
return p2;
if (p2.data == "")
return p1;
var r = new Polynomial();
p1Mos = p1.data.split(" + ");
p2Mos = p2.data.split(" + ");
var data = "";
var k = 0; var current = p1Mos[0];
for (var i = 0; i < p2Mos.length; i++){
if (k >= p1Mos.length)
data += " + " + p2Mos[i];
else {
while (k < p1Mos.length && compareMonomial(current, p2Mos[i]) < 0){
data += " + " + p1Mos[k]; k++; current = p1Mos[k];
}
if (current == undefined)
data += " + " + p2Mos[i];
else if (compareMonomial(current, p2Mos[i]) == 0){
if (addMonomial(current, p2Mos[i]) != "ZERO")
data += " + " + addMonomial(current, p2Mos[i]);
k++; current = p1Mos[k];
}
else{
data += " + " + p2Mos[i];
}
}
}
while (k < p1Mos.length){
data += " + " + p1Mos[k]; k++
}
r.setData(data.substring(3));
return r;
}
function sub(p1, p2){
if (p2.data == "")
return p1;
if (p1.data == ""){
//need to update here
return p2;
}
var r = new Polynomial();
p1Mos = p1.data.split(" + ");
p2Mos = p2.data.split(" + ");
var data = "";
var k = 0; var current = p1Mos[0];
for (var i = 0; i < p2Mos.length; i++){
p2coef = p2Mos[i].split(/[x|y|z]g/)[0];
if (parseInt(p2coef) < 0)
p2MoNeg = p2Mos[i].substring(1);
else
p2MoNeg = "-" + p2Mos[i];
if (k >= p1Mos.length)
data += " + " + p2MoNeg;
else {
while (k < p1Mos.length && compareMonomial(current, p2Mos[i])< 0){
data += " + " + p1Mos[k]; k++; current = p1Mos[k];
}
if (current == undefined)
data += " + " + p2MoNeg;
else if (compareMonomial(current, p2Mos[i]) == 0){
if (subMonomial(current, p2Mos[i]) != "ZERO")
data += " + " + subMonomial(current, p2Mos[i]);
k++; current = p1Mos[k];
}
else{
data += " + " + p2MoNeg;
}
}
}
while (k < p1Mos.length){
data += " + " + p1Mos[k]; k++
}
r.setData(data.substring(3));
return r;
}
// multiply polynomial p1 (with array of monomials p1Mos) with a monomial m2
function mulPM(p1Mos, m2){
r = new Polynomial();
var data = "";
for (var i = 0; i < p1Mos.length; i++){
if (mulMonomial(p1Mos[i], m2) != "ZERO")
data += " + " + mulMonomial(p1Mos[i], m2);
}
r.setData(data.substring(3)); return r;
}
// multiply polynomial p1 with polynomial p2
function mul(p1, p2){
p1s = p1.data.split(" + ");
p2s = p2.data.split(" + ");
r = new Polynomial();
for (var i = 0; i < p2s.length; i++){
r = add(r, mulPM(p1s, p2s[i]));
}
return r;
}
function Fricke(s){
var w = new Word();
w.setWordString(s);
w.reduce(); s = w.toString();
var r = new Polynomial();
var l = s.length;
// Trivial case or case where 2 consecutive letters among last 4 letter
// are the same
if (l == 0){
r.setData("2x0y0z0");
return r;
}
if (l == 1){
if (s == "a" || s == "A")
r.setData("1x1y0z0");
else
r.setData("1x0y1z0");
return r;
}
if (s.charAt(l-1) == s.charAt(l-2)){
var c = s.charAt(l-1);
var s1 = s.substring(0, l-2);
r = sub(mul(Fricke(s1 + c), Fricke(c + "")), Fricke(s1));
return r;
}
if (l == 2){
if (s == "ab" || s == "ba" || s == "AB" || s == "BA"){
r.setData("1x0y0z1");
return r;
}
else if (s == "aB" || s == "Ba" || s == "Ab" || s == "bA"){
r.setData("1x1y1z0 + -1x0y0z1");
return r;
}
}
if (s.charAt(l-2) == s.charAt(l-3)){
s = s.charAt(l-1) + s.substring(0, l-1);
r = Fricke(s);
return r;
}
if (l == 3){
s = s.charAt(l-1) + s.substring(0, l-1);
r = Fricke(s);
return r;
}
if (s.charAt(l-3) == s.charAt(l-4)){
s = s.substring(l-2, l) + s.substring(0, l-2);
r = Fricke(s);
return r;
}
// Case 2: w = x1Yx2y
var t = s.charCodeAt(l-1) - s.charCodeAt(l-3);
if ( t == 32 || t == -32){
var w1 = new Word();
w1.setWordString(s.substring(l-2, l));
var s2 = s.substring(0, l-2) + w1.bar().toString();
r = sub(mul(Fricke(s.substring(0, l-2)), Fricke(s.substring(l-2, l))),
Fricke(s2));
return r;
}
// Case 3: w = ...Xyxy
t = s.charCodeAt(l-2) - s.charCodeAt(l-4);
if ( t == 32 || t == -32){
r = Fricke(s.charAt(l-1) + s.substring(0, l-1));
return r;
}
// Last case 4: w = ...xyxy
r = sub(mul(Fricke(s.substring(0, l-2)), Fricke(s.substring(l-4, l-2))),
Fricke(s.substring(0, l-4)));
return r;
}
// Helper methods:
function cancel2Char(src, i){
dest = [];
for (var j = 0; j < i; j++)
dest[j] = src[j];
for (var j = i; j < src.length - 2; j++)
dest[j] = src[j+2];
return dest;
}
function trim2Ends(src){
dest = [];
for (var j = 1; j < src.length - 1; j++)
dest[j - 1] = src[j];
return dest;
}
// Function to find the minimum equivalent class of a reduced cyclic word rc.
function minReduceCyclic(rc){
var min = rc.clone();
var W = new Word();
for (var i = 0; i < rc.word.length; i++){
W = rc.permute(i);
if (min.compareTo(W) > 0)
min = W;
}
return min;
}
function canonical(W){
W.reduce();
W.toReduceCyclic();
W = minReduceCyclic(W);
return W;
}
// CLASS Word
function Word(){
this.word = [];
this.setWord = function(w){
this.word = w;
}
this.setWordString = function(s){
// a-z = 1-26 && A-Z = -1 - -26;
for (var i = 0; i < s.length; i++){
var c = s.charCodeAt(i);
if (c >= 65 && c <= 90 )
this.word[i] = -(c - 64);
else if (c >= 97 && c < 122)
this.word[i] = c - 96;
else {
this.word = []; return;
}
}
}
this.length = function(){ return this.word.length; }
}
Word.prototype.isReduce = function(){
for(var i = 0; i < this.word.length - 1; i++)
if (this.word[i] == -this.word[i+1])
return false;
return true;
}
Word.prototype.reduce = function(){
var i = -2;
while(i != this.word.length - 1){
if (this.word.length == 0)
return;
for(i = 0; i < this.word.length - 1; i++)
if (this.word[i] == -this.word[i+1]){
this.word = cancel2Char(this.word, i);
break;
}
}
return;
}
Word.prototype.toReduceCyclic = function(){
this.reduce();
while(this.word[0] == -this.word[this.word.length - 1])
this.word = trim2Ends(this.word);
return;
}
Word.prototype.toString = function(){
var s = "";
for (var i = 0; i < this.word.length; i++){
if (this.word[i] < 0)
s = s + String.fromCharCode(-this.word[i] + 64);
else
s = s + String.fromCharCode(this.word[i] + 96);
}
return s;
}
Word.prototype.bar = function(){
var r = new Word();
var w = r.word;
for (var j = 0; j < this.word.length; j++)
w[j] = - this.word[this.word.length - 1 - j];
return r;
}
Word.prototype.permute = function(i){
var r = new Word();
var w = r.word;
for (var j = 0; j < this.word.length; j++)
w[j] = this.word[(j + i) % this.word.length];
return r;
}
Word.prototype.isEqual = function(W2){
var w1 = this.word;
var w2 = W2.word;
if (w1.length != w2.length)
return false;
for (var i = 0; i < w1.length; i++)
if (w1[i] != w2[i])
return false;
return true;
}
Word.prototype.compareTo = function(W2){
var w1 = this.word;
var w2 = W2.word;
var l = Math.min(w1.length, w2.length);
for (var i = 0; i < l; i++){
if (w1[i] < w2[i])
return -1;
if (w1[i] > w2[i])
return 1;
}
if (w1.length > w2.length)
return 1;
if (w1.length < w2.length)
return -1;
return 0;
}
Word.prototype.clone = function(){
var r = new Word();
w = r.word;
for (var i = 0; i < this.word.length; i++)
w[i] = this.word[i];
return r;
}
Word.prototype.primitiveExp = function(){
w = this.word; l = w.length;
for(var i = 1; i <= l/2; i++){
if (l % i == 0){
found = true;
test:
for (var j = 0; j < l/i; j++)
for (var t = 0; t < i; t++)
if (w[t] != w[t + j * i]){
found = false;
break test;
}
}
if (found)
return l/i;
}
return 1;
}
// Need to debug
function concat(W1, W2){
r = new Word();
var w1 = W1.word;
var w2 = W2.word;
var w = []
for (var i = 0; i < w1.length; i++)
w[i] = w1[i];
for (var i = 0; i < w2.length; i++)
w[i + w1.length] = w2[i];
r.setWord(w);
return r;
}
// These are supposed to be surface word methods
// sw is a word and the order is a map, which
// maps characters in a word (1-k or (-1)-(-k)) to its order in the alphabet
function order(sw){
var w = sw.word;
var o = new Map();
for (var i = 0; i < w.length; i++)
o.set(w[i], i);
return o;
}
function findCharPos(sw, c){
for (var i = 0; i < sw.word.length; i++)
if (sw.word[i] == c)
return i;
}
var time;
$(document).ready(function(){
$("#compute").click(function(){
$("#note").text("Note: Computing.....");
time = new Date().getTime();
setTimeout(function(){
new Promise(compute).then(doneCompute("Note: Done! The computation time is about "));
}, 50);
});
$("#reset").click(function(){
$("#note").text("Note:");
$("#word").val("");
$("#fpOutput").text("");
});
});
function compute(value){
$("#fpOutput").html(Fricke($("#word").val()).toString());
$("#fpOutput").slideDown("slow");
}
function doneCompute(value){
$("#note").text(value + (new Date().getTime() - time - 50) + " milliseconds.");
}
<!DOCTYPE html>
<html>
<head>
<link href="fricke.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="Word.js"></script>
<script type="text/javascript" src="Polynomial.js"></script>
<script type="text/javascript" src="gui.js"></script>
</head>
<body>
<h2>Computing Fricke Polynomial for word with 2 generators a and b</h2>
<br>
<b>Word: </b>
<input type="text" class="inputText" id="word"></input><br><br>
<br><br>
<button class="button" id="compute">Compute</button>
<button class="button" id="reset">Reset</button>
<br><br>
<div id="note">Note:</div>
<br><br>
<div class="slide">Fricke Polynomial</div>
<div class="output" id="fpOutput"></div>
</body>
</html>

How to add Counter on multiple text

I have a multiple Pie chart that has text inside it to show the percentage and I want to animate it. below code increment, the count until the number reaches to hundred.
var text = document.querySelectorAll('text');
var duration = setInterval(count, 14);
var c = 0;
function count(){
for (var i = 0; i < text.length; i++) {
if(c == 101){
clearInterval(time);
}else {
text[i].textContent = c + '%';
}
}
c++;
}
but i want to have different text/number on each item. i tried below code but the number jumps from 0 to the value that i specified.
var text = document.querySelectorAll('text');
var duration = setInterval(count, 14);
var c = 0;
function count(){
for (var i = 0; i < text.length; i++) {
if(c == 82){
text[0].textContent = c + '%';
}else if(c == 46){
text[1].textContent = c + '%';
}else if(c == 76){
text[2].textContent = c + '%';
}else if(c == 56){
text[3].textContent = c + '%';
}else if(c == 26){
text[4].textContent = c + '%';
}else if(c == 96){
text[5].textContent = c + '%';
}
}
c++;
}
setInterval(count, 14);

You dont need for statement as you are accessing all elements manually and you want numbers to change while their value is smaller than target:
function count(){
if(c <= 82)
text[0].textContent = c + '%';
if(c <= 46)
text[1].textContent = c + '%';
if(c <= 76)
text[2].textContent = c + '%';
if(c <= 56)
text[3].textContent = c + '%';
if(c <= 26)
text[4].textContent = c + '%';
//after reaching to highest number you need to stop the clock
if(c <= 96)
text[5].textContent = c + '%'
else
clearInterval(time);
c++;
}

Logic issue in minesweeper

--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>

Assigning static data amount in a div to be called from a function

I'm using an example based on the following example:
http://jsfiddle.net/5tt7d3e6/
In this, a function is created to turn a number into words.
The function is processed in the following HTML
<input type="text" name="number" placeholder="Number OR Amount" onkeyup="word.innerHTML=convertNumberToWords(this.value)" />
<div id="word"></div>
The above allows you to enter a number into a textbox. The function translates what you type as a number into words.
Is there an easy way to set a div which already holds the number, instead of typing it to display?'
Such as:
<div data="innerHTML=convertNumberToWords(1233213)"></div>

You can hookup an event handler for onreadystatechange and inside that you can put your logic.
Fiddle 1
document.onreadystatechange = function() {
word.innerHTML = convertNumberToWords(1233213);
};
However if you want show data based on existing value inside input, first put an id attribute for input
<input id="number" ... />
And then in JS:
document.onreadystatechange = function() {
word.innerHTML = convertNumberToWords(number.value);
};
Fiddle 2

Suggestion: use switch statment in convertNumberToWords()
switch(amount){
case 0: 'zero'; break;
default: 'Please enter number only!'; break;
}

If you want to write to the document as it is processed and not later.
<div id="word">
<script>
document.write(convertNumberToWords(12233456))
</script>
</div>
This is the recommended way though:
<div id="word"></div>
<script>
document.getElementById('word').innerHTML = convertNumberToWords(12233456);
</script>
--
<script>
function convertNumberToWords(amount) {
var words = new Array();
words[0] = '';
words[1] = 'One';
words[2] = 'Two';
words[3] = 'Three';
words[4] = 'Four';
words[5] = 'Five';
words[6] = 'Six';
words[7] = 'Seven';
words[8] = 'Eight';
words[9] = 'Nine';
words[10] = 'Ten';
words[11] = 'Eleven';
words[12] = 'Twelve';
words[13] = 'Thirteen';
words[14] = 'Fourteen';
words[15] = 'Fifteen';
words[16] = 'Sixteen';
words[17] = 'Seventeen';
words[18] = 'Eighteen';
words[19] = 'Nineteen';
words[20] = 'Twenty';
words[30] = 'Thirty';
words[40] = 'Forty';
words[50] = 'Fifty';
words[60] = 'Sixty';
words[70] = 'Seventy';
words[80] = 'Eighty';
words[90] = 'Ninety';
amount = amount.toString();
var atemp = amount.split(".");
var number = atemp[0].split(",").join("");
var n_length = number.length;
var words_string = "";
if (n_length <= 9) {
var n_array = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0);
var received_n_array = new Array();
for (var i = 0; i < n_length; i++) {
received_n_array[i] = number.substr(i, 1);
}
for (var i = 9 - n_length, j = 0; i < 9; i++, j++) {
n_array[i] = received_n_array[j];
}
for (var i = 0, j = 1; i < 9; i++, j++) {
if (i == 0 || i == 2 || i == 4 || i == 7) {
if (n_array[i] == 1) {
n_array[j] = 10 + parseInt(n_array[j]);
n_array[i] = 0;
}
}
}
value = "";
for (var i = 0; i < 9; i++) {
if (i == 0 || i == 2 || i == 4 || i == 7) {
value = n_array[i] * 10;
} else {
value = n_array[i];
}
if (value != 0) {
words_string += words[value] + " ";
}
if ((i == 1 && value != 0) || (i == 0 && value != 0 && n_array[i + 1] == 0)) {
words_string += "Crores ";
}
if ((i == 3 && value != 0) || (i == 2 && value != 0 && n_array[i + 1] == 0)) {
words_string += "Lakhs ";
}
if ((i == 5 && value != 0) || (i == 4 && value != 0 && n_array[i + 1] == 0)) {
words_string += "Thousand ";
}
if (i == 6 && value != 0 && (n_array[i + 1] != 0 && n_array[i + 2] != 0)) {
words_string += "Hundred and ";
} else if (i == 6 && value != 0) {
words_string += "Hundred ";
}
}
words_string = words_string.split(" ").join(" ");
}
return words_string;
}
</script>
<div id="word">
<script>
document.write(convertNumberToWords(12233456))
</script>
</div>

Fiddle Link
change the value of textbox and press click button it will return into word
<input id="check"type="text" name="number" placeholder="Number OR Amount" />
<div id="word"></div>
<input type="button" id="button" value="click">
js code
$("#button").click(function()
{
var number = $('#check').val();
$("#word").html(toWords(number));
});
var th = ['','thousand','million', 'billion','trillion'];
var dg = ['zero','one','two','three','four', 'five','six','seven','eight','nine']; var tn = ['ten','eleven','twelve','thirteen', 'fourteen','fifteen','sixteen', 'seventeen','eighteen','nineteen']; var tw = ['twenty','thirty','forty','fifty', 'sixty','seventy','eighty','ninety']; function toWords(s){s = s.toString(); s = s.replace(/[\, ]/g,''); if (s != parseFloat(s)) return 'not a number'; var x = s.indexOf('.'); if (x == -1) x = s.length; if (x > 15) return 'too big'; var n = s.split(''); var str = ''; var sk = 0; for (var i=0; i < x; i++) {if ((x-i)%3==2) {if (n[i] == '1') {str += tn[Number(n[i+1])] + ' '; i++; sk=1;} else if (n[i]!=0) {str += tw[n[i]-2] + ' ';sk=1;}} else if (n[i]!=0) {str += dg[n[i]] +' '; if ((x-i)%3==0) str += 'hundred ';sk=1;} if ((x-i)%3==1) {if (sk) str += th[(x-i-1)/3] + ' ';sk=0;}} if (x != s.length) {var y = s.length; str += 'point '; for (var i=x+1; i<y; i++) str += dg[n[i]] +' ';} return str.replace(/\s+/g,' ');}

How to use AJAX or JSON in this code?

I am creating a website application that allows users to select a seat, if it is not already reserved, and reserve it.
I have created a very round about way of getting the seats that are previously reserved using iFrames, however that was temporarily, now I need to make it secure and "proper javascript code" using proper practices. I have no clue what AJAX (or JSON) is, nor how to add it to this code, but it needs to get the file "seatsReserved"+this.id(that is the date)+"Que.html" and compare the string of previously reserved seats to see which class to make the element. If this is horrible, or if any of the other things could work better, I am open to criticism to everything. Thank you all!
Here is the javascript code:
A little side note, all of the if statements are due to different amount of seats in each row
<script>
var i = " 0 ";
var counter = 0;
var leng=0;
document.getElementById("Show1").addEventListener("click", changeDay);
document.getElementById("Show2").addEventListener("click", changeDay);
document.getElementById("Show3").addEventListener("click", changeDay);
function changeDay() {
var iFrame = document.getElementById("seatList");
iFrame.src = "seatsReserved" + this.id + "Que.html";
document.getElementById('date').innerHTML = this.id;
var seatsTaken = iFrame.contentWindow.document.body.innerHTML;
var k = 0;
let = 'a';
var lc = 0;
for (lc = 1; lc <= 14; lc++) {
if (lc == 1) {
leng = 28;
}
else if (lc == 2) {
leng = 29;
}
else if (lc == 3) {
leng = 32;
}
else if (lc == 4 || lc == 6 || lc == 12 || lc == 14) {
leng = 33;
}
else if (lc == 5 || lc == 13) {
leng = 34;
}
else if (lc == 8 || lc == 10) {
leng = 35;
}
else {
leng = 36;
}
for (k = 1; k <= leng; k++) {
if (seatsTaken.indexOf((" " +
let +k + " ")) <= -1) {
seat = document.getElementById(let +k);
seat.removeEventListener("click", selectedSeat);
}
else {
document.getElementById(let +k).className = "openseat";
document.getElementById(let +k).removeEventListener("click", doNothing);
}
}
let = String.fromCharCode(let.charCodeAt(0) + 1);
}
}
function loadChanges() {
var iFrame = document.getElementById("seatList");
var seatsTaken = iFrame.contentWindow.document.body.innerHTML;
var k = 0;
let = 'a';
var lc = 0;
var leng = 0;
for (lc = 1; lc <= 14; lc++) {
if (lc == 1) {
leng = 28;
}
else if (lc == 2) {
leng = 29;
}
else if (lc == 3) {
leng = 32;
}
else if (lc == 4 || lc == 6 || lc == 12 || lc == 14) {
leng = 33;
}
else if (lc == 5 || lc == 13) {
leng = 34;
}
else if (lc == 8 || lc == 10) {
leng = 35;
}
else {
leng = 36;
}
for (k = 1; k <= leng; k++) {
if (seatsTaken.indexOf((" " +
let +k + " ")) <= -1) {
seat = document.getElementById(let +k);
seat.addEventListener("click", selectedSeat);
seat.className = "openseat";
}
else {
document.getElementById(let +k).className = "notAvailible";
document.getElementById(let +k).addEventListener("click", doNothing);
}
}
let = String.fromCharCode(let.charCodeAt(0) + 1);
}
i = " 0 ";
counter = 0;
document.getElementById("seatString").innerHTML = i;
document.getElementById("getSeats").value = i;
document.getElementById("seatnums").innerHTML = counter;
}
i = document.getElementById("seatString").innerHTML;
counter = document.getElementById("seatnums").innerHTML;
function selectedSeat() {
var w = this.id;
var l = (" " + w);
var b = (" " + w + " ");
if (counter < 5) {
if (i.indexOf(b) <= 0) {
this.className = "closedseat";
i = i + b;
i = i.replace(" 0 ", " ");
document.getElementById("seatString").innerHTML = i;
document.getElementById("getSeats").value = i;
counter = counter + 1;
document.getElementById("seatnums").innerHTML = counter;
}
else if (i.indexOf(b) > 0) {
this.className = "openseat";
i = i.replace(b, "");
document.getElementById("seatString").innerHTML = i;
document.getElementById("getSeats").value = i;
counter = counter - 1;
document.getElementById("seatnums").innerHTML = counter;
}
}
else if (i.indexOf(b) > 0) {
this.className = "openseat";
i = i.replace(b, "");
document.getElementById("seatString").innerHTML = i;
document.getElementById("getSeats").value = i;
counter = counter - 1;
document.getElementById("seatnums").innerHTML = counter;
}
}
function doNothing() {
}
var rannum = Math.random() * 1000;
document.getElementById('getConfirmation').value = rannum;
</script>