Checked is not a function javascript error - javascript

I am working on a simple To-Do list project. In this project you are able to add a task and once the user presses submit the task is shown along with a checkbox. When you click the checkbox, it's supposed to show an alert and make the tasks style decoration line-through.
I've tried many ways to accomplish this. The first way I tried work however it only worked on one task and for the others, it showed an error. I also tried making it work with an if statement but it's just showing the same error. I've tried switching a lot of things around (that's why my code looks so messy) but it just won't work.
var name = prompt("Please Enter Your Name :)");
document.write('<h1 id = "greet">' + 'Hello ' + name + ' Let\'s Be Productive Today' + '</h1>');
function showTime() {
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var session = "AM";
if (h == 0) {
h = 12;
}
if (h > 12) {
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
document.getElementById("b").onclick = function () {
document.querySelector(".To-Do").style.display = 'flex';
}
document.querySelector(".close").onclick = function () {
document.querySelector(".To-Do").style.display = 'none';
}
document.getElementById("task");
document.getElementById("date");
document.getElementById("tsks");
document.getElementById("check");
document.getElementById("s").onclick = function () {
var newEl = document.createElement("p");
newEl.setAttribute("id", "tsks");
newEl.innerHTML = "<input type = 'checkbox' id = 'check' onclick = 'checked();'>" + task.value + ' ' + date.value;
document.getElementById('task2').appendChild(newEl);
}
function checked() {
if (check.onclick == true) {
tsks.style.textDecoration = "line-through";
alert("You completed task" + tsks.value + "Good Job!");
}
}
body {
background-image: url("https://i.ibb.co/dLrp1gP/43150024-polka-dot-background-blue-vector-elegant-image.jpg");
}
.content {
background-color: white;
width: 700px;
height: 400px;
position: absolute;
left: 325px;
top: 150px;
}
#greet {
position: absolute;
left: 445px;
top: 150px;
background: -webkit-linear-gradient(#2980B9, #6DD5FA, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#MyClockDisplay {
color: blue;
font-weight: bold;
position: absolute;
left: 625px;
top: 230px;
}
#b {
background-image: linear-gradient(#2980B9, #6DD5FA, #fff);
color: black;
border-color: white;
text-weight: bold;
width: 70px;
height: 50px;
position: absolute;
left: 625px;
top: 260px;
}
.To-Do {
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
display: none;
z-index: 1;
}
.modal-content {
width: 500px;
height: 300px;
border-radius: 10px;
position: relative;
background-color: purple;
}
.close {
position: absolute;
top: 0;
right: 14px;
font-size: 32px;
transform: rotate(45deg);
cursor: pointer;
}
#aat {
background-color: white;
font-weight: bold;
}
h2 {
position: absolute;
left: 590px;
top: 305px;
border-bottom: 5px solid blue;
}
p {
font-weight: bold;
position: relative;
left: 590px;
top: 360px;
}
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
</head>
<body>
<div class = "content"></div>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<button id = "b">Add A Task</button>
<div class = "To-Do">
<div class = "modal-content">
<h1 align = "center" id = "aat">ADD A TASK</h1>
<input type = "text" placeholder = "task" id = "task">
<input type = "date" id = "date">
<div class = "close">+</div>
<input type = "submit" id = "s">
</div>
</div>
<div id = "task2"></div>
<h2>YOUR TASKS</h2>
</body>
</html>


I'm not sure why, but within the scope of the onclick execution, checked is a local variable that contains the checkbox's clicked property.
There are several ways you can resolve this:
Rename the function so it doesn't conflict with this variable.
Call it as window.checked().
Assign the handler by assigning to the onclick property or calling addEventListener rather than putting it in the HTML.
I've chosen the last method.
Also, IDs should be unique, you can't reuse the IDs check and tsks for every task. You can refer to the box that was clicked on with this in the function, and the containing p element with this.parentElement.
A p element doesn't have a value property, use textContent to get the name of the task.
var name = prompt("Please Enter Your Name :)");
document.write('<h1 id = "greet">' + 'Hello ' + name + ' Let\'s Be Productive Today' + '</h1>');
function showTime() {
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var session = "AM";
if (h == 0) {
h = 12;
}
if (h > 12) {
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
document.getElementById("b").onclick = function () {
document.querySelector(".To-Do").style.display = 'flex';
}
document.querySelector(".close").onclick = function () {
document.querySelector(".To-Do").style.display = 'none';
}
document.getElementById("task");
document.getElementById("date");
document.getElementById("tsks");
document.getElementById("check");
document.getElementById("s").onclick = function () {
var newEl = document.createElement("p");
newEl.innerHTML = "<input type = 'checkbox'>" + task.value + ' ' + date.value;
newEl.querySelector("input").addEventListener("click", checked);
document.getElementById('task2').appendChild(newEl);
}
function checked() {
if (this.checked) {
var tsks = this.parentElement;
tsks.style.textDecoration = "line-through";
alert("You completed task" + tsks.innerText + "Good Job!");
}
}
body {
background-image: url("https://i.ibb.co/dLrp1gP/43150024-polka-dot-background-blue-vector-elegant-image.jpg");
}
.content {
background-color: white;
width: 700px;
height: 400px;
position: absolute;
left: 325px;
top: 150px;
}
#greet {
position: absolute;
left: 445px;
top: 150px;
background: -webkit-linear-gradient(#2980B9, #6DD5FA, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#MyClockDisplay {
color: blue;
font-weight: bold;
position: absolute;
left: 625px;
top: 230px;
}
#b {
background-image: linear-gradient(#2980B9, #6DD5FA, #fff);
color: black;
border-color: white;
text-weight: bold;
width: 70px;
height: 50px;
position: absolute;
left: 625px;
top: 260px;
}
.To-Do {
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
display: none;
z-index: 1;
}
.modal-content {
width: 500px;
height: 300px;
border-radius: 10px;
position: relative;
background-color: purple;
}
.close {
position: absolute;
top: 0;
right: 14px;
font-size: 32px;
transform: rotate(45deg);
cursor: pointer;
}
#aat {
background-color: white;
font-weight: bold;
}
h2 {
position: absolute;
left: 590px;
top: 305px;
border-bottom: 5px solid blue;
}
p {
font-weight: bold;
position: relative;
left: 590px;
top: 360px;
}
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
</head>
<body>
<div class = "content"></div>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<button id = "b">Add A Task</button>
<div class = "To-Do">
<div class = "modal-content">
<h1 align = "center" id = "aat">ADD A TASK</h1>
<input type = "text" placeholder = "task" id = "task">
<input type = "date" id = "date">
<div class = "close">+</div>
<input type = "submit" id = "s">
</div>
</div>
<div id = "task2"></div>
<h2>YOUR TASKS</h2>
</body>
</html>


Hey it worked by changing if(check.onclick == true) to if(check.checked == true) and also function name from checked to chec, because checked is a property in java script . So this keyword cannot be used as function name.
var name = prompt("Please Enter Your Name :)");
document.write( '<h1 id = "greet">' + 'Hello ' + name + ' Let\'s Be Productive Today' + '</h1>');
function showTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
document.getElementById("b").onclick = function() {
document.querySelector(".To-Do").style.display = 'flex';
}
document.querySelector(".close").onclick = function() {
document.querySelector(".To-Do").style.display = 'none';
}
document.getElementById("task");
document.getElementById("date");
document.getElementById("tsks");
document.getElementById("check");
document.getElementById("s").onclick = function() {
var newEl = document.createElement("p");
newEl.setAttribute("id", "tsks" );
newEl.innerHTML = "<input type = 'checkbox' id = 'check' onclick = 'chec()'>" + task.value + ' ' + date.value;
document.getElementById('task2').appendChild(newEl);
}
function chec() {
if(check.checked == true) {
tsks.style.textDecoration = "line-through";
alert("You completed task" + tsks.value + "Good Job!");
}
}
body {
background-image:url("https://i.ibb.co/dLrp1gP/43150024-polka-dot-background-blue-vector-elegant-image.jpg");
}
.content {
background-color:white;
width:700px;
height:400px;
position:absolute;
left:325px;
top:150px;
}
#greet {
position:absolute;
left:445px;
top:150px;
background: -webkit-linear-gradient(#2980B9, #6DD5FA, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#MyClockDisplay {
color:blue;
font-weight:bold;
position:absolute;
left:625px;
top:230px;
}
#b {
background-image:linear-gradient(#2980B9, #6DD5FA, #fff);
color:black;
border-color:white;
text-weight:bold;
width:70px;
height:50px;
position:absolute;
left:625px;
top:260px;
}
.To-Do {
width:100%;
height:100%;
position:absolute;
top:0;
display:flex;
justify-content:center;
align-items:center;
display:none;
z-index:1;
}
.modal-content {
width:500px;
height:300px;
border-radius:10px;
position:relative;
background-color:purple;
}
.close {
position:absolute;
top:0;
right:14px;
font-size:32px;
transform:rotate(45deg);
cursor:pointer;
}
#aat {
background-color:white;
font-weight:bold;
}
h2 {
position:absolute;
left:590px;
top:305px;
border-bottom:5px solid blue;
}
p {
font-weight:bold;
position:relative;
left:590px;
top:360px;
}
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
</head>
<body>
<div class = "content"></div>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<button id = "b">Add A Task</button>
<div class = "To-Do">
<div class = "modal-content">
<h1 align = "center" id = "aat">ADD A TASK</h1>
<input type = "text" placeholder = "task" id = "task">
<input type = "date" id = "date">
<div class = "close">+</div>
<input type = "submit" id = "s">
</div>
</div>
<div id = "task2"></div>
<h2>YOUR TASKS</h2>
</body>
</html>


I got it to work by changing checked() to window.checked() and removing the if statement in side the checked function
newEl.innerHTML = "<input type = 'checkbox' id = 'check' onclick = 'window.checked()'>" + task.value + ' ' + date.value;
function checked() {
tsks.style.textDecoration = "line-through";
alert("You completed task" + tsks.value + "Good Job!");
}


Two points:
You have used function "checked" on the checkbox. It is the name of
property, so choose any other name
To change only selected
element - pass it to event handler.
Working example: https://jsfiddle.net/zordaxy/L0sbp8mt/27/
document.getElementById("b").onclick = function() {
document.querySelector(".To-Do").style.display = 'flex';
}
document.querySelector(".close").onclick = function() {
document.querySelector(".To-Do").style.display = 'none';
}
document.getElementById("s").onclick = function() {
var newEl = document.createElement("p");
newEl.setAttribute("id", "tsks" );
newEl.innerHTML = "<input type = 'checkbox' id = 'check' onclick = 'checked2(this);'>" + task.value + ' ' + date.value;
document.getElementById('task2').appendChild(newEl);
}
function checked2(item) {
console.log(item);
item.parentElement.style.textDecoration = "line-through";
}
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
</head>
<body>
<div class = "content"></div>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<button id = "b">Add A Task</button>
<div class = "To-Do">
<div class = "modal-content">
<p align = "center" id = "aat" onclick='checked()'>ADD A TASK</p>
<input type = "text" placeholder = "task" id = "task">
<input type = "date" id = "date">
<div class = "close">+</div>
<input type = "submit" id = "s">
</div>
</div>
<div id = "task2"></div>
<h2>YOUR TASKS</h2>
</body>
</html>

Related

Jquery Fade Cycle through paragraphs and display one item at a time

I cannot get it to just display one at a time. It has to do a full cycle before it displays just one paragraph. Pulling my hair out.
$(function(){
setInterval(function(){$('.forumFeed > :first-child').fadeOut(3000).next('p').delay(3000).fadeIn(1000).end().appendTo('.forumFeed');}, 5000);
});
https://codepen.io/capseaslug/pen/yqyBXB

Hide all but the first paragraph tag by default. Inside the setInterval hide the one that is showing and display the next one (controlled by an index variable).
To make the items fade in/out nicely you can fade in the next element after the visible one is finished hiding.
Added some variables at the top to play with the aesthetics / number of items looped through.
SO didn't have moment.js so I hard coded some string. Codepen for a working version.
var numberOfItems = 10;
var flipSpeed = 2000;
var fadeOutSpeed = 500;
var fadeInSpeed = 200;
(function(c){
var uniquename = 'rssfeed' // id of target div
var query = 'select * from rss(0,' + numberOfItems + ') where url = "https://forums.mankindreborn.com/f/-/index.rss"'; // RSS Target, 0,5 signifies number of entries to show
var numretries = 1; // increase this number (number of retries) if you're still having problems
//////// No Need To Edit Beyond Here Unless You Want To /////////
var counter = typeof c === 'number'? c : numretries;
var thisf = arguments.callee;
var head = document.getElementsByTagName('head')[0];
var s = document.createElement('script');
window["callback_" + uniquename + (--counter)] = function(r){
head.removeChild(s);
if(r && r.query && r.query.count === 0 && counter > 0){
return thisf(counter);
}
//r now contains the result of the YQL Query as a JSON
var feedmarkup = '';
var feed = r.query.results.item // get feed as array of entries
for (var i=0; i<feed.length; i++) {
feedmarkup += '<p><span class="firstrowwrap"><a href="' + feed[i].link + '">';
feedmarkup += feed[i].title + '</a> <span class="comments"> Replies: ';
feedmarkup += feed[i].comments + ' </span></span><span class="secondRow"> <i class="fas fa-feather-alt"></i> ' ;
feedmarkup += feed[i].creator + ' <span class="posttime"> Last Post: ';
//pubishdate since
publishDate = feed[i].pubDate;
var inDate = publishDate;
var publisheddate = new Date(inDate);
feedmarkup += 'moment.js is missing ' + '</span></span></p>';
//endpublishdate since
}
document.getElementById(uniquename).innerHTML = feedmarkup;
};
var baseurl = "https://query.yahooapis.com/v1/public/yql?q=";
s.src = baseurl + encodeURIComponent(query) + "&format=json&callback=callback_" + uniquename + counter;
head.append(s);
})();
$(function(){
var index = 0;
setInterval(function() {
$('#rssfeed>p:visible').fadeOut(fadeOutSpeed, ()=> {
$('#rssfeed>p').eq(index).fadeIn(fadeInSpeed);
});
index++;
if(index === $('#rssfeed>p').length){
index = 0;
}
}, flipSpeed);
});
#main-container {
padding:4em;
background: #333;
font-family: 'exo'
}
#rssfeed p:not(:first-child) {
display: none;
}
a{
font-weight:
500;
color: #68ddda;
}
a:hover{
color: #4ca7a4;
}
.firstrowwrap{
display: flex;
justify-content: space-between;
}
.secondRow{
display: block;
padding-top: 4px;
margin-bottom: -5px;
}
#rssfeed p{
background-color: #212121;
padding: 10px;
width: 400px;
margin-bottom: 2px;
color: #464646;
}
.comments{
height: 18px;
position: relative;
z-index: 1;
padding-left: 8px;
margin-left: 4px;
font-size: 12px;
}
.comments:after{
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
background-color: #969696;
border-radius: 2px;
z-index: -1;
margin-left: 4px;
}
.posttime{
float: right;
font-size: 13px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="main-container">
<div class="row">
<div class="col-md-12">
<div class="forumFeed" id="rssfeed"></div>
</div>
</div>
</div>

Why is my iframe tag not working?

I am trying to make an online code editor.
I have a <select></select> tag that lets me choose between a new window or iframe when I view the result; but whenever I select iframe it doesn't work.
I tried looking on stackoverflow for somebody who had the same problem but I can't find anything. P.S. I don't know why but the "Run Code Snippet" button doesn't show everything correctly. Please help me!
$(document).ready(function(){
var HTMLeditor = document.getElementById("HTMLeditor");
var CSSeditor = document.getElementById("CSSeditor");
var JSeditor = document.getElementById("JSeditor");
var result = document.getElementById("see-result");
var code = document.getElementById("code");
var jqueryMode = document.getElementById("jqueryMode");
var bootstrapMode = document.getElementById("bootstrapMode");
var gigaboyMode = document.getElementById("gigaboyMode");
var sizzle = document.getElementById("sizzle");
var scrnSz = document.getElementById("screenSize");
var editorStyle = document.getElementById("editorStyle");
var codes = ["JavaScript", "CSS", "Gigaboy.js", "JQuery", "Bootstrap", "HTML5", "Sizzle.js"];
var selCode = Math.floor(Math.random() * 7);
code.innerHTML = codes[selCode]
$("textarea").keydown(function(e) {
if (e.keyCode == 9) {
e.preventDefault();
var start = $(this).get(0).selectionStart;
var end = $(this).get(0).selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end));
// put caret at right position again
$(this).get(0).selectionStart =
$(this).get(0).selectionEnd = start + 1;
}
});
HTMLeditor.value = '<!DOCTYPE HTML>\n<HTML lang="en">\n\t<head>\n\t\t<meta charset="UTF-8">\n\t\t<title title="">\n\t\t\t\n\t\t</title>\n\t</head>\n\t<body>\n\t\t\n\t</body>\n</HTML>';
CSSeditor.value = 'body {\n\tbackground-color: white;\n\tmargin: auto;\n\tfont-size: 12pt;\n\tfont-family: Courier New;\n\twidth: auto;\n\theight: auto;\n}';
JSeditor.placeholder = 'Please do NOT include this.\t\t\n\nwindow.onload = function() {\n //Code\n};\t\t\n\nIt causes glitches.';
function getCode() {
HTML = HTMLeditor.value.replace(/\t+/g, "");
CSS = CSSeditor.value.replace(/\t+/g, "");
JS = JSeditor.value.replace(/\t+/g, "");
} setInterval(getCode, 750);
jqueryMode.onclick = function() {
if (jqueryMode.value == "ON") {
JSeditor.placeholder = 'Pleas do NOT include this.\t\t\n\n$("document").ready(function(){\n\ //Code\n});\t\t\n\nIt causes glitches.';
} else if (jqueryMode.value == "OFF") {
JSeditor.placeholder = 'Please do NOT include this.\t\t\n\nwindow.onload = function() {\n //Code\n};\t\t\n\nIt causes glitches.';
}
};
editorStyle.onclick = function() {
if (editorStyle.value == "default") {
HTMLeditor.style.backgroundColor = "#DEDEDE";
HTMLeditor.style.backgroundImage = "none";
HTMLeditor.style.color = "#0000DD";
CSSeditor.style.backgroundColor = "#DEDEDE";
CSSeditor.style.backgroundImage = "none";
CSSeditor.style.color = "#DD0000";
JSeditor.style.backgroundColor = "#DEDEDE";
JSeditor.style.backgroundImage = "none";
JSeditor.style.color = "#007700";
} else if (editorStyle.value == "dark") {
HTMLeditor.style.backgroundColor = "#000040";
HTMLeditor.style.backgroundImage = "none";
HTMLeditor.style.color = "#EEEE00";
CSSeditor.style.backgroundColor = "#000040";
CSSeditor.style.backgroundImage = "none";
CSSeditor.style.color = "#EE0000";
JSeditor.style.backgroundColor = "#000040";
JSeditor.style.backgroundImage = "none";
JSeditor.style.color = "#00EE00";
} else if (editorStyle.value == "classic") {
HTMLeditor.style.backgroundColor = "white";
HTMLeditor.style.backgroundImage = "none";
HTMLeditor.style.color = "#000000";
CSSeditor.style.backgroundColor = "white";
CSSeditor.style.backgroundImage = "none";
CSSeditor.style.color = "#000000";
JSeditor.style.backgroundColor = "white";
JSeditor.style.backgroundImage = "none";
JSeditor.style.color = "#000000";
} else if (editorStyle.value == "fireNight") {
HTMLeditor.style.backgroundImage = "url('http://www.creativepadphotography.com/wp-content/uploads/2015/04/star_new_low.jpg')";
HTMLeditor.style.color = "#FF9A00";
CSSeditor.style.backgroundImage = "url('http://www.creativepadphotography.com/wp-content/uploads/2015/04/star_new_low.jpg')";
CSSeditor.style.color = "#FF9A00";
JSeditor.style.backgroundImage = "url('http://www.creativepadphotography.com/wp-content/uploads/2015/04/star_new_low.jpg')";
JSeditor.style.color = "#FF9A00";
}
};
result.onclick = function() {
if (HTMLeditor.value == "" && CSSeditor.value == "" && JSeditor.value == "") {
alert("It kind of makes sense to type some code first.");
} else {
if (scrnSz.value == "iframe") {
var ifr = document.createElement("iframe");
ifr.setAttribute("id", "iframeResult");
document.getElementById("iframecontainer").innerHTML = " ">
document.getElementById("iframecontainer").appendChild(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(HTMLeditor.value + '<style>' + CSSeditor.value + '</style>' + '<script>' + JSeditor.value + '</script>');
ifrw.document.close();
if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
ifrw.document.body.contentEditable = true;
ifrw.document.body.contentEditable = false;
}
} else {
if (scrnSz.value == "MED") {
newWindow = window.open("about:blank", "window1", "width=950, height=750");
newWindow.moveTo(150, 150);
} else if (scrnSz.value == "FULL") {
newWindow = window.open("about:blank", "window1", "width=" + screen.width + ", height=" + screen.height);
newWindow.moveTo(150, 150);
} else if (scrnSz.value == "SMALL") {
newWindow = window.open("about:blank", "window1", "width=750, height=550");
newWindow.moveTo(255, 255);
}
if (jqueryMode.value == "twoTwoOne") {
newWindow.document.write('<script src="http://code.jquery.com/jquery-2.2.1.js"></script>');
} else if (jqueryMode.value == "oneTwelveOne") {
newWindow.document.write('<script src="http://code.jquery.com/jquery-1.12.1.js"></script>')
}
if (bootstrapMode.value == "ON") {
newWindow.document.write('<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">');
}
if (gigaboyMode.value == "ON") {
newWindow.document.write('<script src="http://www.gigaboywebdesigns.com/Gigaboy.js"></script>');
}
if (sizzle.value == "ON") {
newWindow.document.write('https://github.com/jquery/sizzle/blob/master/src/sizzle.js');
}
newWindow.document.write(HTMLeditor.value);
newWindow.document.write('<script>' + JSeditor.value + '</script>');
newWindow.document.write('<style>' + CSSeditor.value + '</style>');
}
}
};
ctrlS(result);
});
#font-face {
font-family: Bandits;
src: url("Bandits.ttf");
font-weight: bold;
}
#iframeResult {
position: absolute;
left: 10%;
width: 1005px;
height: 800px;
margin-bottom: 15px;
}
textarea {
position: absolute;
left: 10%;
width: 1000px;
height: 625px;
resize: none;
border: 2px solid #999;
background-attachment: fixed;
background-size: cover;
background-color: #DEDEDE;
tab-size: 3;
-moz-tab-size: 3;
-o-tab-size: 3;
-webkit-tab-size: 3;
} textarea:focus {
outline: 2px solid #999;
}
#HTMLeditor {
top: 173px;
color: #00D;
}
#CSSeditor {
top: 833px;
color: #D00;
}
#JSeditor {
top: 1493px;
color: #070;
}
#see-result {
color: black;
position: absolute;
top: 158px;
right: 12%;
width: 125px;
letter-spacing: 2.7px;
font-weight: bold;
background-color: #999;
text-align: center;
padding-top: 6.5px;
padding-bottom: 6.5px;
cursor: pointer;
font-family: Times;
} #see-result:hover {
background-color: #BCBCBC;
}
header {
text-align: center;
font-size: 75px;
font-family: Bandits;
letter-spacing: 4px;
}
body {
background-image: url("bgimage.png");
background-attachment: fixed;
color: limegreen;
}
#jqueryMode {
position: absolute;
left: 10.3%;
top: 145px;
}
#bootstrapMode {
position: absolute;
left: 19.95%;
top: 145px;
}
#gigaboyMode {
position: absolute;
left: 30.75%;
top: 145px;
}
#sizzle {
position: absolute;
left: 42.075%;
top: 145px;
}
#screenSize {
position: absolute;
left: 52.4%;
top: 145px;
}
#editorStyle {
position: absolute;
left: 62.3%;
top: 145px;
}
a {
text-decoration: none;
color: red;
}
#rightMenu {
background-color: #EFEFEF;
border-radius: 3px;
color: black;
width: 110px;
display: none;
position: absolute;
}
#share {
padding: 5.5px;
}
#fb, #tweet {
position: relative;
top: -7px;
left: 40px;
margin: 2px;
display: none;
}
hr {
border-color: lightgrey;
width: 105px;
display: none;
}
<!DOCTYPE HTML>
<HTML lang = "en-US">
<head>
<meta charset = "UTF-8">
<meta name = "author" content = "Adam S. Oates">
<meta name = "description" content = "This HTML file was created to test new thigns I learn">
<meta name = "title" content = "Online Code Editor">
<title title = "Online Code Editor">
Online Code Editor
</title>
<link rel = "apple-touch-icon" href = "">
<link rel = "shortcut icon" href = "">
<link rel = "stylesheet" type = "text/css" href = "main.css">
<script type = "text/javascript" src = "http://code.jquery.com/jquery-2.2.1.js"></script>
<script type = "text/javascript" src = "http://www.gigaboywebdesigns.com/Gigaboy.js"></script>
<script type = "text/javascript" src = "main.js"></script>
<noscript>
<h2>JavaScript is required. Look in your browser settings to enable JavaScript.</h2>
</noscript>
</head>
<body>
<section contextmenu="mymenu">
<script type = "text/javascript">
function goTo(url) { window.open(url, "shareWindow"); }
</script>
<header>
Gigaboy <span id = "code"></span> Editor
</header>
<textarea spellcheck = "false" autocomplete = "off" placeholder = "Type HTML Here" id = "HTMLeditor"></textarea>
<a id="CSS"></a>
<textarea spellcheck = "false" autocomplete = "off" placeholder = "Type CSS Here" id = "CSSeditor"></textarea>
<a id="JavaScript"></a>
<textarea spellcheck = "false" autocomplete = "off" placeholder = "Type JavaScript Here" id = "JSeditor"></textarea>
<span id = "see-result">View Result</span>
<div name = "iframecontainer"></div>
<select id = "jqueryMode">
<option value = "OFF">Disable JQuery</option>
<option value = "oneTwelveOne">Jquery 1.12.1</option>
<option value = "twoTwoOne">JQuery 2.2.1</option>
</select>
<select id = "bootstrapMode">
<option value = "OFF">Disable Bootstrap</option>
<option value = "ON">Enable Bootstrap</option>
</select>
<select id = "gigaboyMode">
<option value = "OFF">Disable Gigaboy.js</option>
<option value = "ON">Enable Gigaboy.js</option>
</select>
<select id = "sizzle">
<option value = "OFF">Disable Sizzle.js</option>
<option value = "ON">Enable Sizzle.js</option>
</select>
<select id = "screenSize">
<option value = "SMALL">Small Screen</option>
<option value = "MED">Medium Screen</option>
<option value = "FULL">Full Screen</option>
<option value = "iframe">In Frame</option>
</select>
<select id = "editorStyle">
<option value = "default">Default</option>
<option value = "dark">Dark</option>
<option value = "classic">Classic</option>
<option value = "fireNight">Fire in the Night</option>
</select>
<menu type="context" id="mymenu">
<menu label="Share...">
<menuitem label="Facebook" icon="http://images.roadscholar.org/header/facebook_icon.jpg" onclick="goTo('https://www.facebook.com/sharer/sharer.php?u=http%3A' + window.location.href);"></menuitem>
<menuitem label="Tweet" icon="http://www.wolffgames.com/images/twitter_icon.png" onclick="goTo('http://twitter.com/intent/tweet?text=' + document.title + ': ' + window.location.href);"></menuitem>
<menuitem label="Google+" icon="http://blogs.findlaw.com/blotter/images/google-plus.png" onclick="goTo('https://plus.google.com/share?url=' + window.location.href);"></menuitem>
<menuitem label="Pinterest" icon="data:image/jpeg;base64,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" onclick="goTo('https://pinterest.com/pin/create/button/?url=&media=&description=' + window.location.href);"></menuitem>
</menu>
<menuitem label="Copy HTML5 Code" onclick="prompt('Click Ctrl + C then Enter to copy HTML code.', HTML);"></menuitem>
<menuitem label="Copy CSS Code" onclick="prompt('Click Ctrl + C then Enter to copy CSS code.', CSS);"></menuitem>
<menuitem label="Copy JS Code" onclick="prompt('Click Ctrl + C then Enter to copy JS code.', JS);"></menuitem>
</menu>
</section>
</body>
</html>

I am re-inserting your code with every </script> changed to </scr'+'ipt>. Your code had some errors, be even after they were fixed, the popup and the iframe were blocked from executing:
Error 1 - Change document.getElementById("iframecontainer").innerHTML = " "> to document.getElementById("iframecontainer").innerHTML = " ";
Error 2 - Change <div name = "iframecontainer"></div> to <div id = "iframecontainer"></div>
Error invoking window.open - "Blocked opening 'about:blank' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set."
Error inserting iframe - "Uncaught SecurityError: Sandbox access violation: Blocked a frame at "http://stacksnippets.net" from accessing a frame at "null". Both frames are sandboxed and lack the "allow-same-origin" flag."
$(document).ready(function(){
var HTMLeditor = document.getElementById("HTMLeditor");
var CSSeditor = document.getElementById("CSSeditor");
var JSeditor = document.getElementById("JSeditor");
var result = document.getElementById("see-result");
var code = document.getElementById("code");
var jqueryMode = document.getElementById("jqueryMode");
var bootstrapMode = document.getElementById("bootstrapMode");
var gigaboyMode = document.getElementById("gigaboyMode");
var sizzle = document.getElementById("sizzle");
var scrnSz = document.getElementById("screenSize");
var editorStyle = document.getElementById("editorStyle");
var codes = ["JavaScript", "CSS", "Gigaboy.js", "JQuery", "Bootstrap", "HTML5", "Sizzle.js"];
var selCode = Math.floor(Math.random() * 7);
code.innerHTML = codes[selCode]
$("textarea").keydown(function(e) {
if (e.keyCode == 9) {
e.preventDefault();
var start = $(this).get(0).selectionStart;
var end = $(this).get(0).selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end));
// put caret at right position again
$(this).get(0).selectionStart =
$(this).get(0).selectionEnd = start + 1;
}
});
HTMLeditor.value = '<!DOCTYPE HTML>\n<HTML lang="en">\n\t<head>\n\t\t<meta charset="UTF-8">\n\t\t<title title="">\n\t\t\t\n\t\t</title>\n\t</head>\n\t<body>\n\t\t\n\t</body>\n</HTML>';
CSSeditor.value = 'body {\n\tbackground-color: white;\n\tmargin: auto;\n\tfont-size: 12pt;\n\tfont-family: Courier New;\n\twidth: auto;\n\theight: auto;\n}';
JSeditor.placeholder = 'Please do NOT include this.\t\t\n\nwindow.onload = function() {\n //Code\n};\t\t\n\nIt causes glitches.';
function getCode() {
HTML = HTMLeditor.value.replace(/\t+/g, "");
CSS = CSSeditor.value.replace(/\t+/g, "");
JS = JSeditor.value.replace(/\t+/g, "");
} setInterval(getCode, 750);
jqueryMode.onclick = function() {
if (jqueryMode.value == "ON") {
JSeditor.placeholder = 'Pleas do NOT include this.\t\t\n\n$("document").ready(function(){\n\ //Code\n});\t\t\n\nIt causes glitches.';
} else if (jqueryMode.value == "OFF") {
JSeditor.placeholder = 'Please do NOT include this.\t\t\n\nwindow.onload = function() {\n //Code\n};\t\t\n\nIt causes glitches.';
}
};
editorStyle.onclick = function() {
if (editorStyle.value == "default") {
HTMLeditor.style.backgroundColor = "#DEDEDE";
HTMLeditor.style.backgroundImage = "none";
HTMLeditor.style.color = "#0000DD";
CSSeditor.style.backgroundColor = "#DEDEDE";
CSSeditor.style.backgroundImage = "none";
CSSeditor.style.color = "#DD0000";
JSeditor.style.backgroundColor = "#DEDEDE";
JSeditor.style.backgroundImage = "none";
JSeditor.style.color = "#007700";
} else if (editorStyle.value == "dark") {
HTMLeditor.style.backgroundColor = "#000040";
HTMLeditor.style.backgroundImage = "none";
HTMLeditor.style.color = "#EEEE00";
CSSeditor.style.backgroundColor = "#000040";
CSSeditor.style.backgroundImage = "none";
CSSeditor.style.color = "#EE0000";
JSeditor.style.backgroundColor = "#000040";
JSeditor.style.backgroundImage = "none";
JSeditor.style.color = "#00EE00";
} else if (editorStyle.value == "classic") {
HTMLeditor.style.backgroundColor = "white";
HTMLeditor.style.backgroundImage = "none";
HTMLeditor.style.color = "#000000";
CSSeditor.style.backgroundColor = "white";
CSSeditor.style.backgroundImage = "none";
CSSeditor.style.color = "#000000";
JSeditor.style.backgroundColor = "white";
JSeditor.style.backgroundImage = "none";
JSeditor.style.color = "#000000";
} else if (editorStyle.value == "fireNight") {
HTMLeditor.style.backgroundImage = "url('http://www.creativepadphotography.com/wp-content/uploads/2015/04/star_new_low.jpg')";
HTMLeditor.style.color = "#FF9A00";
CSSeditor.style.backgroundImage = "url('http://www.creativepadphotography.com/wp-content/uploads/2015/04/star_new_low.jpg')";
CSSeditor.style.color = "#FF9A00";
JSeditor.style.backgroundImage = "url('http://www.creativepadphotography.com/wp-content/uploads/2015/04/star_new_low.jpg')";
JSeditor.style.color = "#FF9A00";
}
};
result.onclick = function() {
if (HTMLeditor.value == "" && CSSeditor.value == "" && JSeditor.value == "") {
alert("It kind of makes sense to type some code first.");
} else {
if (scrnSz.value == "iframe") {
var ifr = document.createElement("iframe");
ifr.setAttribute("id", "iframeResult");
document.getElementById("iframecontainer").innerHTML = " ";
document.getElementById("iframecontainer").appendChild(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(HTMLeditor.value + '<style>' + CSSeditor.value + '</style>' + '<script>' + JSeditor.value + '</scr'+'ipt>');
ifrw.document.close();
if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
ifrw.document.body.contentEditable = true;
ifrw.document.body.contentEditable = false;
}
} else {
if (scrnSz.value == "MED") {
newWindow = window.open("about:blank", "window1", "width=950, height=750");
newWindow.moveTo(150, 150);
} else if (scrnSz.value == "FULL") {
newWindow = window.open("about:blank", "window1", "width=" + screen.width + ", height=" + screen.height);
newWindow.moveTo(150, 150);
} else if (scrnSz.value == "SMALL") {
newWindow = window.open("about:blank", "window1", "width=750, height=550");
newWindow.moveTo(255, 255);
}
if (jqueryMode.value == "twoTwoOne") {
newWindow.document.write('<script src="http://code.jquery.com/jquery-2.2.1.js"></scr'+'ipt>');
} else if (jqueryMode.value == "oneTwelveOne") {
newWindow.document.write('<script src="http://code.jquery.com/jquery-1.12.1.js"></scr'+'ipt>')
}
if (bootstrapMode.value == "ON") {
newWindow.document.write('<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">');
}
if (gigaboyMode.value == "ON") {
newWindow.document.write('<script src="http://www.gigaboywebdesigns.com/Gigaboy.js"></scr'+'ipt>');
}
if (sizzle.value == "ON") {
newWindow.document.write('https://github.com/jquery/sizzle/blob/master/src/sizzle.js');
}
newWindow.document.write(HTMLeditor.value);
newWindow.document.write('<script>' + JSeditor.value + '</scr'+'ipt>');
newWindow.document.write('<style>' + CSSeditor.value + '</style>');
}
}
};
ctrlS(result);
});
#font-face {
font-family: Bandits;
src: url("Bandits.ttf");
font-weight: bold;
}
#iframeResult {
position: absolute;
left: 10%;
width: 1005px;
height: 800px;
margin-bottom: 15px;
}
textarea {
position: absolute;
left: 10%;
width: 1000px;
height: 625px;
resize: none;
border: 2px solid #999;
background-attachment: fixed;
background-size: cover;
background-color: #DEDEDE;
tab-size: 3;
-moz-tab-size: 3;
-o-tab-size: 3;
-webkit-tab-size: 3;
} textarea:focus {
outline: 2px solid #999;
}
#HTMLeditor {
top: 173px;
color: #00D;
}
#CSSeditor {
top: 833px;
color: #D00;
}
#JSeditor {
top: 1493px;
color: #070;
}
#see-result {
color: black;
position: absolute;
top: 158px;
right: 12%;
width: 125px;
letter-spacing: 2.7px;
font-weight: bold;
background-color: #999;
text-align: center;
padding-top: 6.5px;
padding-bottom: 6.5px;
cursor: pointer;
font-family: Times;
} #see-result:hover {
background-color: #BCBCBC;
}
header {
text-align: center;
font-size: 75px;
font-family: Bandits;
letter-spacing: 4px;
}
body {
background-image: url("bgimage.png");
background-attachment: fixed;
color: limegreen;
}
#jqueryMode {
position: absolute;
left: 10.3%;
top: 145px;
}
#bootstrapMode {
position: absolute;
left: 19.95%;
top: 145px;
}
#gigaboyMode {
position: absolute;
left: 30.75%;
top: 145px;
}
#sizzle {
position: absolute;
left: 42.075%;
top: 145px;
}
#screenSize {
position: absolute;
left: 52.4%;
top: 145px;
}
#editorStyle {
position: absolute;
left: 62.3%;
top: 145px;
}
a {
text-decoration: none;
color: red;
}
#rightMenu {
background-color: #EFEFEF;
border-radius: 3px;
color: black;
width: 110px;
display: none;
position: absolute;
}
#share {
padding: 5.5px;
}
#fb, #tweet {
position: relative;
top: -7px;
left: 40px;
margin: 2px;
display: none;
}
hr {
border-color: lightgrey;
width: 105px;
display: none;
}
<!DOCTYPE HTML>
<HTML lang = "en-US">
<head>
<meta charset = "UTF-8">
<meta name = "author" content = "Adam S. Oates">
<meta name = "description" content = "This HTML file was created to test new thigns I learn">
<meta name = "title" content = "Online Code Editor">
<title title = "Online Code Editor">
Online Code Editor
</title>
<link rel = "apple-touch-icon" href = "">
<link rel = "shortcut icon" href = "">
<link rel = "stylesheet" type = "text/css" href = "main.css">
<script type = "text/javascript" src = "http://code.jquery.com/jquery-2.2.1.js"></script>
<script type = "text/javascript" src = "http://www.gigaboywebdesigns.com/Gigaboy.js"></script>
<script type = "text/javascript" src = "main.js"></script>
<noscript>
<h2>JavaScript is required. Look in your browser settings to enable JavaScript.</h2>
</noscript>
</head>
<body>
<section contextmenu="mymenu">
<script type = "text/javascript">
function goTo(url) { window.open(url, "shareWindow"); }
</script>
<header>
Gigaboy <span id = "code"></span> Editor
</header>
<textarea spellcheck = "false" autocomplete = "off" placeholder = "Type HTML Here" id = "HTMLeditor"></textarea>
<a id="CSS"></a>
<textarea spellcheck = "false" autocomplete = "off" placeholder = "Type CSS Here" id = "CSSeditor"></textarea>
<a id="JavaScript"></a>
<textarea spellcheck = "false" autocomplete = "off" placeholder = "Type JavaScript Here" id = "JSeditor"></textarea>
<span id = "see-result">View Result</span>
<div id = "iframecontainer"></div>
<select id = "jqueryMode">
<option value = "OFF">Disable JQuery</option>
<option value = "oneTwelveOne">Jquery 1.12.1</option>
<option value = "twoTwoOne">JQuery 2.2.1</option>
</select>
<select id = "bootstrapMode">
<option value = "OFF">Disable Bootstrap</option>
<option value = "ON">Enable Bootstrap</option>
</select>
<select id = "gigaboyMode">
<option value = "OFF">Disable Gigaboy.js</option>
<option value = "ON">Enable Gigaboy.js</option>
</select>
<select id = "sizzle">
<option value = "OFF">Disable Sizzle.js</option>
<option value = "ON">Enable Sizzle.js</option>
</select>
<select id = "screenSize">
<option value = "SMALL">Small Screen</option>
<option value = "MED">Medium Screen</option>
<option value = "FULL">Full Screen</option>
<option value = "iframe">In Frame</option>
</select>
<select id = "editorStyle">
<option value = "default">Default</option>
<option value = "dark">Dark</option>
<option value = "classic">Classic</option>
<option value = "fireNight">Fire in the Night</option>
</select>
<menu type="context" id="mymenu">
<menu label="Share...">
<menuitem label="Facebook" icon="http://images.roadscholar.org/header/facebook_icon.jpg" onclick="goTo('https://www.facebook.com/sharer/sharer.php?u=http%3A' + window.location.href);"></menuitem>
<menuitem label="Tweet" icon="http://www.wolffgames.com/images/twitter_icon.png" onclick="goTo('http://twitter.com/intent/tweet?text=' + document.title + ': ' + window.location.href);"></menuitem>
<menuitem label="Google+" icon="http://blogs.findlaw.com/blotter/images/google-plus.png" onclick="goTo('https://plus.google.com/share?url=' + window.location.href);"></menuitem>
<menuitem label="Pinterest" icon="data:image/jpeg;base64,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" onclick="goTo('https://pinterest.com/pin/create/button/?url=&media=&description=' + window.location.href);"></menuitem>
</menu>
<menuitem label="Copy HTML5 Code" onclick="prompt('Click Ctrl + C then Enter to copy HTML code.', HTML);"></menuitem>
<menuitem label="Copy CSS Code" onclick="prompt('Click Ctrl + C then Enter to copy CSS code.', CSS);"></menuitem>
<menuitem label="Copy JS Code" onclick="prompt('Click Ctrl + C then Enter to copy JS code.', JS);"></menuitem>
</menu>
</section>
</body>
</html>

Move div to certain table cell according to random number [duplicate]

This question already has answers here:
How to move an element into another element
(16 answers)
Closed 7 years ago.
I am new at JavaScript. I am trying to make Snakes and Ladders game with native JavaScript code as much as possible. My problem is that I can not move players from their initial position according to the random number generated when pressing on dice image. Can anyone help me on how to move players?
var gameBoard = {
createBoard: function(dimension, mount, intialPosition) {
var mount = document.querySelector(mount);
if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
return false;
} else {
dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
var table = document.createElement('table'),
row = document.createElement('tr'),
cell = document.createElement('td'),
rowClone,
cellClone;
var output;
for (var r = 0; r < dimension; r++) {
rowClone = row.cloneNode(true);
table.appendChild(rowClone);
for (var c = 0; c < dimension; c++) {
cellClone = cell.cloneNode(true);
rowClone.appendChild(cellClone);
}
}
mount.appendChild(table);
output = gameBoard.enumerateBoard(table, intialPosition);
}
return output;
},
enumerateBoard: function(board) {
var rows = board.getElementsByTagName('tr'),
text = document.createTextNode(''),
rowCounter = 1,
size = rows.length,
cells,
cellsLength,
cellNumber,
odd = false,
control = 0;
for (var r = size - 1; r >= 0; r--) {
cells = rows[r].getElementsByTagName('td');
cellsLength = cells.length;
rows[r].className = r % 2 == 0 ? 'even' : 'odd';
odd = ++control % 2 == 0 ? true : false;
size = rows.length;
for (var i = 0; i < cellsLength; i++) {
if (odd == true) {
cellNumber = --size + rowCounter - i;
} else {
cellNumber = rowCounter;
}
cells[i].className = i % 2 == 0 ? 'even' : 'odd';
cells[i].id = cellNumber;
cells[i].appendChild(text.cloneNode());
cells[i].firstChild.nodeValue = cellNumber;
rowCounter++;
}
}
var lastRow = rows[0].getElementsByTagName('td');
lastRow[0].id = 'lastCell';
var firstRow = rows[9].getElementsByTagName('td');
firstRow[0].id = 'firstCell';
intialPosition();
return gameBoard;
}
};
window.onload = (function(e) {
gameBoard.createBoard(10, "#grid", intialPosition);
});
var face1 = new Image()
face1.src = "d1.gif"
var face2 = new Image()
face2.src = "d2.gif"
var face3 = new Image()
face3.src = "d3.gif"
var face4 = new Image()
face4.src = "d4.gif"
var face5 = new Image()
face5.src = "d5.gif"
var face6 = new Image()
face6.src = "d6.gif"
function rollDice() {
var randomdice = Math.floor(Math.random() * 6) + 1;
document.images["mydice"].src = eval("face" + randomdice + ".src")
if (randomdice == 6) {
alert('Congratulations! You got 6! Roll the dice again');
}
return randomdice;
}
function intialPosition() {
$("#firstCell").append($("#player1"));
$("#firstCell").append($("#player2"));
}
/*body {
background-image: url('snakesandladder2.png');
background-repeat: no-repeat;
background-size: 100%;
background-color: #4f96cb;
}*/
#game {
width: 80%;
margin-left: auto;
margin-right: auto;
display: table;
}
#gameBoardSection {
border: 3px inset #0FF;
border-radius: 10px;
width: 65%;
display: table-cell;
}
table {
width: 100%;
}
td {
border-radius: 10px;
width: 60px;
height: 60px;
line-height: normal;
vertical-align: bottom;
text-align: left;
border: 0px solid #FFFFFF;
position: relative;
}
table tr:nth-child(odd) td:nth-child(even),
table tr:nth-child(even) td:nth-child(odd) {
background-color: PowderBlue;
}
table tr:nth-child(even) td:nth-child(even),
table tr:nth-child(odd) td:nth-child(odd) {
background-color: SkyBlue;
}
#lastCell {
background-image: url('rotstar2_e0.gif');
background-repeat: no-repeat;
background-size: 100%;
}
#ladder {
position: absolute;
top: 300px;
left: 470px;
-webkit-transform: rotate(30deg);
z-index: 1;
opacity: 0.7;
}
#bigSnake {
position: absolute;
top: 20px;
left: 200px;
opacity: 0.7;
z-index: 1;
}
#diceAndPlayerSection {
background-color: lightpink;
border: 1px;
border-style: solid;
display: table-cell;
border-radius: 10px;
border: 3px inset #0FF;
width: 35%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="StyleSheet1.css" rel="stylesheet" />
<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="game">
<div id="gameBoardSection">
<div id="grid"></div>
<div id="ladder">
<img src="oie_eRDOY2iqd5oQ.gif" />
</div>
<div id="bigSnake">
<img src="oie_485727sRN4KKBG.png" />
</div>
<div id="player1" style="position:absolute; top:10px; left:10px;">
<img src="humanPiece.png" />
</div>
<div id="player2" style="position:absolute; top:15px; left:5px;">
<img src="computerPiece.png" />
</div>
</div>
<div id="diceAndPlayerSection">
<div id="reset">
<button type="button" name="reset">New Game</button>
</div>
<div>
<button type="button" name="reset">Reset</button>
</div>
<div>
<button type="button" name="addPlayer">Add Player</button>
</div>
<div id="diceSection">
<img src="d1.gif" name="mydice" onclick="rollDice()" style="background-color: white;">
<!--<h2 id="status" style="clear:left;"></h2>-->
</div>
</div>
</div>
<script src="JavaScript1.js"></script>
</body>
</html>
I fell miserable about not being able to finish the game. I really need help. Thanks in advance.

Well, first of all this question has been already asked and answered on SO and table cells are just the same as usual elements :)
Since you're using jQuery anyway, you can use .detach()
var element = $('td:eq(0) span').detach();
$('td:eq(1)').append(element);
Here's a jsfiddle.
Or, as proposed in this answer, you can use a native js solution.

Resetting timer and score values to 0 before a new game starts

Im new to this but I've been having some trouble with trying to get my timer and score values back to 0 before a new game of memory starts. The values do reset, but don't show it until that value is affected. For example, the value for the number of matches never goes back to 0, it stays on 10(the max number of pairs) until you find the first match of the next game where it will then turn to 1. Does anybody know how to get the values to show 0 again when a new board is called up instead of just resetting when that value is affected?
I have already set
var turns = 0
var matches = 0
and called in them up as 0 in the function newBoard().
My timer code is:
var c = 0;
var t;
var timer_is_on = 0;
function timedCount() {
document.getElementById('txt').value = c;
c = c+1;
t = setTimeout(timedCount, 1000);
}
function startTimer() {
if (!timer_is_on) {
timer_is_on = 1;
timedCount();
}
}
function stopCount() {
clearTimeout(t);
timer_is_on = 0;
}
function resetTime(){
clearTimeout(t);
timer_is_on = 0;
c = 0
Where I have called up the resetTime() function in the function newBoard().
My full code is:
body{
background:#FFF;
font-family: Cooper Black;
}
h1{
font-family: Cooper Black;
text-align: center;
font-size: 64px;
color: #FF0066;
}
footer{
height: 150px;
background: -webkit-linear-gradient(#99CCFF, #FFF); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#99CCFF, #FFF); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#99CCFF, #FFF); /* For Firefox 3.6 to 15 */
background: linear-gradient(#99CCFF, #FFF); /* Standard syntax (must be last) */
}
div#memory_board{
background: -webkit-radial-gradient(#FFF, #CC99FF); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient(#FFF, #CC99FF); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(#FFF, #CC99FF); /* For Firefox 3.6 to 15 */
background: radial-gradient(#FFF, #CC99FF); /* Standard syntax (must be last) */
border:#FF0066 10px ridge;
width:510px;
height:405px;
padding:24px;
}
div#memory_board > div{
background:url(tile_background.png) no-repeat;
border:#000 1px solid;
width:45px;
height:45px;
float:left;
margin:7px;
padding:20px;
cursor:pointer;
}
alert{
background: #FF0066;
}
button{
font-family: Cooper Black;
font-size: 20px;
color: #FF0066;
background: #5CE62E;
border: #C2E0FF 2px outset;
border-radius: 25px;
padding: 10px;
cursor: pointer;
}
input#txt{
background: yellow;
color: #FF0066;
font-family: Times New Roman;
font-size: 84px;
height: 150px;
width: 150px;
border-radius: 100%;
text-align: center;
border: none;
}
input#pause{
font-family: Cooper Black;
font-size: 18px;
color: #FF0066;
background: #C2E0FF;
border: #C2E0FF 2px outset;
border-radius: 25px;
padding: 10px;
cursor: pointer;
margin-top: 10px;
}
div.goes{
text-align: center;
border: #C2E0FF 5px double;
height: 160px;
width: 120px;
margin-top: 48px;
margin-left: 5px;
}
div.matches{
text-align: center;
border: #C2E0FF 5px double;
height: 160px;
width: 120px;
margin-top: 30px;
margin-left: 10px;
}
p{
font-size: 28px;
}
span{
font-family: Times New Roman;
font-size: 84px;
}
.sprite {
width:96px;
height:96px;
position: relative;
margin:15px;
}
.toon{
background: url(explode.png);
}
}
#dialogoverlay{
display: none;
opacity: 0.8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;
z-index: 10;
}
#dialogbox{
display: none;
position: fixed;
background: #FF0066;
border-radius:7px;
width:400px;
z-index: 10;
}
#dialogbox > div{ background: #FFF; margin:8px; }
#dialogbox > div > #dialogboxhead{ background: linear-gradient(#99CCFF, #FFF); height: 40px; color: #CCC; }
#dialogbox > div > #dialogboxbody{ background: #FFF; color: #FF0066; font-size: 36px; text-align:center;}
#dialogbox > div > #dialogboxfoot{ background: linear-gradient(#FFF, #99CCFF); padding-bottom: 20px; text-align:center; }
<!DOCTYPE html>
<html>
<head>
<title>Memory Card Game</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="text.css" />
<link rel="stylesheet" type="text/css" href="960.css" />
<link rel="stylesheet" type="text/css" href="mystyles.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript' src='jquery.animateSprite.js'></script>
<script>
var memory_array = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
var turns = 0
var matches = 0
Array.prototype.memory_tile_shuffle = function(){
var i = this.length, j, temp;
while(--i > 0){
j = Math.floor(Math.random() * (i+1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function newBoard(){
tiles_flipped = 0;
var output = '';
memory_array.memory_tile_shuffle();
for(var i = 0; i < memory_array.length; i++){
output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>';
}
document.getElementById('memory_board').innerHTML = output;
//fade in
$(document).ready(function () {
$('#memory_board > div').hide().fadeIn(1500).delay(6000)
});
resetTime();
turns = 0;
matches = 0;
}
function memoryFlipTile(tile,val){
startTimer();
playClick();
if(tile.innerHTML == "" && memory_values.length < 2){
tile.style.background = '#FFF';
tile.innerHTML = '<img src="' + val + '.png"/>';
if(memory_values.length == 0){
memory_values.push(val);
memory_tile_ids.push(tile.id);
} else if(memory_values.length == 1){
memory_values.push(val);
memory_tile_ids.push(tile.id);
if(memory_values[0] == memory_values[1]){
tiles_flipped += 2;
//sound
playMatch();
//animation
//number of clicks
turns = turns + 1;
document.getElementById("Count").innerHTML = turns;
//number of matches
matches = matches + 1;
document.getElementById("matchNumber").innerHTML = matches;
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
// Check to see if the whole board is cleared
if(tiles_flipped == memory_array.length){
playEnd();
Alert.render("Congratulations! Board Cleared");
//resetTime()
//stopCount();
document.getElementById('memory_board').innerHTML = "";
newBoard();
}
} else {
function flipBack(){
// Flip the 2 tiles back over
var tile_1 = document.getElementById(memory_tile_ids[0]);
var tile_2 = document.getElementById(memory_tile_ids[1]);
tile_1.style.background = 'url(tile_background.png) no-repeat';
tile_1.innerHTML = "";
tile_2.style.background = 'url(tile_background.png) no-repeat';
tile_2.innerHTML = "";
//number of clicks
turns = turns + 1;
document.getElementById("Count").innerHTML = turns;
//clickNumber()
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
}
setTimeout(flipBack, 700);
}
}
}
}
//timer
var c = 0;
var t;
var timer_is_on = 0;
function timedCount() {
document.getElementById('txt').value = c;
c = c+1;
t = setTimeout(timedCount, 1000);
}
function startTimer() {
if (!timer_is_on) {
timer_is_on = 1;
timedCount();
}
}
function stopCount() {
clearTimeout(t);
timer_is_on = 0;
}
function resetTime(){
clearTimeout(t);
timer_is_on = 0;
c = 0
}
//sound effects /*sounds from http://www.freesfx.co.uk*/
function playClick(){
var sound=document.getElementById("click");
sound.play();
}
function playMatch(){
var sound=document.getElementById("match_sound");
sound.play();
}
function playEnd(){
var sound=document.getElementById("finished");
sound.play();
}
//custom alert
function CustomAlert(){
this.render = function(dialog){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (400 * .5)+"px";
dialogbox.style.top = "200px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = "";
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">New Game</button>';
}
this.ok = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
</script>
<script>//sparkle effect: http://www.rigzsoft.co.uk/how-to-implement-animated-sprite-sheets-on-a-web-page/
$(document).ready(function(){
$("#memory_board").click(function animation(){
$(".toon").animateSprite({
columns: 10,
totalFrames: 50,
duration: 1000,
});
});
});
</script>
</head>
<body>
<audio id = "click" src = "click.mp3" preload = "auto"></audio>
<audio id = "match_sound" src = "match.mp3" preload = "auto"></audio>
<audio id = "finished" src = "finished.wav" preload = "auto"></audio>
<div id = "dialogoverlay"></div>
<div id = "dialogbox">
<div>
<div id = "dialogboxhead"></div>
<div id = "dialogboxbody"></div>
<div id = "dialogboxfoot"></div>
</div>
</div>
<div class = "container_16">
<div id = "banner" class = "grid_16">
<p><br></p>
<h1>Memory</h1>
</div>
<div class = "grid_3">
<input type="text" id="txt" value="0"/>
<p><br></p>
<p><br></p>
<div class = "goes">
<p>Turns <br><span id = "Count">0</span></p>
</div>
</div>
<div class = "grid_10">
<div id="memory_board"></div>
<script>newBoard();</script>
<div style="position: relative; height: 110px;">
<div class="sprite toon"></div>
</div>
</div>
<div class = "grid_3">
<button id = "new_game" onclick="newBoard()">New Game</button>
<input type="button" id="pause" value="Pause Game" onclick="stopCount()">
<p><br></p>
<p><br></p>
<p><br></p>
<div class = "matches">
<p>Matches <br><span id = "matchNumber">0</span></p>
</div>
</div>
</div>
<footer> </footer>
</body>
</html>

Both of the variables you are settings are displayed in HTML span objects.
What seems to be happening is that when you reset the Javascript variable, the value is being changed, but the span object where it is displayed to the user is being left at its previous value until it needs to be updated again.
As far as I can tell, your objects have the ids: matchNumber and Count for the match and turn variables respectively. If this is the case, try changing your code to reset the values to zero in the HTML when the variables are reset to zero.
For example:
// Reset the Javascript Count
var turns = 0
// Reset the HTML object
document.getElementById('Count').innerHTML = 0;
// Reset the Javascript Match Count
var matches = 0
// Reset the HTML object
document.getElementById('matchNumber').innerHTML = 0;
If I failed to explain this well, please comment and I'll try to clarify further.

I am not 100% sure, but you can try replacing your function with this one:
function timedCount() {
if(c>10){
//flipBack();
resetTime();
return;
}
document.getElementById('txt').value = c;
c = c+1;
t = setTimeout(timedCount, 1000);
}

javascript background image change using array

I am not exprienced javascript programmer so I try to play with javascript. I am trying to make a slideshow by clicking on a button. Function I am trying to make a function with array that holds the names of all the images and changing the background-image according to the index of the array. I did only this part of function yet and I cant get what is wrong.
function change(lol){
var img = ["veni1.jpg", "veni2.jpg", "veni3"];
var middle = document.getElementById("vvvmiddle");
var index = img.indexOf(middle.style.backgroundImage);
if(change === "right"){
var current = index + 1;
middle.style.backgroundImage = img[current];
}
}
middle {
width:1262px;
height:550px;
background-color: white;
margin-left: -7px;
}
#vvvmiddle {
width:700;
height:400;
background-image:url('veni1.jpg');
margin: 20px 0px 0px 310px;
float:left;
}
#sipka {
width:40;
height:40;
border-radius: 100px;
background-color: #DCDCDC;
float:right;
margin: 450px 410px 0px 0px;
}
#sipkatext {
font-family: Impact;
color: white;
font-size: 30px;
padding-left: 10px;
padding-top: 1px;
}
#sipkaurl {
text-decoration: none;
}
#sipka:hover {
background-color: #3399FF;
}
#sipka2:hover {
background-color: #3399FF;
}
#sipka2 {
width:40;
height:40;
border-radius: 100px;
background-color: #DCDCDC;
float:right;
margin: 450px -100px 0px 0px;
}
#sipkatext2 {
font-family: Impact;
color: white;
font-size: 30px;
padding-left: 13px;
padding-top: 1px;
}
<div id="middle">
<div id="vvvmiddle">
<div id="sipka" onclick="change('left')">
<div id="sipkatext">
<</div>
</div>
<div id="sipka2" onclick="change('right')">
<div id="sipkatext2">></div>
</div>
</div>
</div>

A possible solution may be this one:
var img = ["img1.png", "img2.png", "img3.png"];
var len = img.length;
var url = 'Some url...';
var current=0;
var middle = document.getElementById("vvvmiddle");
middle.style.backgroundImage = "url(" + url + img[current] + ")";
function change(dir){
if(dir == "right" && current < len-1){
current++;
middle.style.backgroundImage = "url(" + url + img[current] + ")";
} else if(dir == "left" && current > 0){
current--;
middle.style.backgroundImage = "url(" + url + img[current] + ")";
}
}
See it in action, check here jsfiddle.

You can try with that:
function change(lol) {
var img = ["veni1.jpg", "veni2.jpg", "veni3"];
var middle = document.getElementById("vvvmiddle");
var index = img.indexOf(middle.style.backgroundImage);
if(lol === "right"){
index = (index + 1) % img.length;
} else {
index = (index + img.length - 1) % img.length;
}
middle.style.backgroundImage = img[index];
}

You are checking wrong variable in condition, it should be lol, not change:
if(lol === "right"){
var current = index + 1;
middle.style.backgroundImage = img[current];
}
Also you should handle "last image" case like Nicolas suggests.

Categories

Resources