Develop Reference

Javascript pixel art maker project

I am a newbie. I am trying to make a pixel art maker. I cannot figure out where I am going wrong at. It lets me choose the size and pick the color but when I hit enter to make the grid, it doesn't do anything. It just goes back to the original settings with 1 filled in and the color black. Any help would be appreciated.
let colorPicker = document.getElementById("colorPicker").value;
let height = document.getElementById("inputHeight").value;
let width = document.getElementById("inputWidth").value;
let table = document.getElementById("pixelCanvas");
let sizePicker = document.getElementById("sizePicker");
sizePicker.addEventListener('sumbit', function(event) {
event.preventDefault()
let height = document.getElementById("inputHeight").value;
let width = document.getElementById("inputWidth").value;
makeGrid(height, width);
});
function makeGrid(height, width); {
let height = document.getElementById("inputHeight");
let width = document.getElementById("inputWidth");
table.innerHTML = null;
for (let i = 0; i < height; i++) {
let row = table.insertRow(i);
for (let j = 0; j < width; j++) {
let cell = row.insertCell(j);
cell.addEventListener("click", function(event) {
cell.style.backgroundColor = colorPicker.value;
});
cell.addEventListener("dblclick", function(event) {
cell.style.backgroundColor = "";
});
}
}
}
body {
text-align: center;
}
h1 {
font-family: Monoton;
font-size: 70px;
margin: 0.2em;
}
h2 {
margin: 1em 0 0.25em;
}
h2:first-of-type {
margin-top: 0.5em;
}
table,
tr,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
tr {
height: 20px;
}
td {
width: 20px;
}
input[type=number] {
width: 6em;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>

You have unnecessary errors. I fixed all of them in the snippet below.
Almost errors come from typo, redundant get values, passing wrong type parameters, and getting elements wrong moment.
Notable here is how you set empty backgroundColor. You should use transparent or inherit instead of "". Check this answer.
let table = document.getElementById("pixelCanvas");
let sizePicker = document.getElementById("sizePicker");
sizePicker.addEventListener('submit', function (event) {
event.preventDefault();
let height = document.getElementById("inputHeight").value;
let width = document.getElementById("inputWidth").value;
makeGrid(height, width);
});
function makeGrid(height, width) {
table.innerHTML = null;
for (let i = 0; i < height; i++) {
let row = table.insertRow(i);
for (let j = 0; j < width; j++) {
let cell = row.insertCell(j);
cell.addEventListener("click", function (event) {
let colorPicker = document.getElementById("colorPicker").value;
cell.style.backgroundColor = colorPicker;
});
cell.addEventListener("dblclick", function (event) {
cell.style.backgroundColor = "inherit";
});
}
}
}
body {
text-align: center;
}
h1 {
font-family: Monoton;
font-size: 70px;
margin: 0.2em;
}
h2 {
margin: 1em 0 0.25em;
}
h2:first-of-type {
margin-top: 0.5em;
}
table,
tr,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
tr {
height: 20px;
}
td {
width: 20px;
}
input[type=number] {
width: 6em;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>
Keep learning and sharpen your skill.

Let's not focus on the typos on your code and just focus on the main issues.
The main issue you encounter is Uncaught SyntaxError: Identifier 'height' has already been declared error so let's investigate where it came from and why:
if we look closer we see that you have a lot of variables named the same in different place, you have height as a global variable and also you declared a variable with the same name, height, in the form submit listener.
This is not the source of the error thanks to the let keyword used to declare the height variable which declares a block-scoped local variable (source MDN). So with that being said, the issue is not coming from using the same name in various places. Let's dig deeper.
In the makeGrid function, you expect two variable that you called then height and width, it seems we're close! In that same function, we can say that the first line, let height = document.getElementById("inputHeight"), is the cause of Uncaught SyntaxError: Identifier 'height' has already been declared error but why ?
As a first look you may say "I didn't declare another variable with the same name and my height variable is local!" but wait, it seems we forgot that the function makeGrid expects a variable called height and that's the source of the error! height is declared on the function arguments and you trying to create a new variable that have the same name when let height = document.getElementById("inputHeight"); is executed.
The above explanation is true for the variable width so we should fix them both. The easiest solution is to choose different names but I'd rather refactor your code a bit and make some improvements so you get the most of my answer
Here's a live demo which contains a wealth of important comments that should help you along:
/** as a rule of thumb, always try to minimize calls to DOM related methods so in our case we cache the elements that we know that we will use them many time. This will improve our code memeory consumption */
const colorPicker = document.getElementById("colorPicker"),
table = document.getElementById("pixelCanvas"),
sizePicker = document.getElementById("sizePicker"),
height = document.getElementById("inputHeight"),
width = document.getElementById("inputWidth"),
/** the function "makeGrid" was refactored (a bit) and now it doesn't need the "height" nor the "width" as it'll get those values on its own thanks to the cached variables height and width */
makeGrid = () => {
/** this function will use height and width variable to get their realtime values whenever the submit button is clicked. See the below loops declaration */
table.innerHTML = '';
for (let i = 0; i < height.value; i++) {
const row = table.insertRow(i);
for (let j = 0; j < width.value; j++) {
const cell = row.insertCell(j);
/** nothing fancy here just used an arrow function (one liner) */
cell.addEventListener("click", () => cell.style.backgroundColor = colorPicker.value);
cell.addEventListener("dblclick", () => cell.style.backgroundColor = "transparent"); /** or any other color you want */
}
}
}
/** listen for submit events and then draw the grid by calling "makeGrid" */
sizePicker.addEventListener('submit', e => e.preventDefault() || makeGrid());
body {
text-align: center;
}
h1 {
font-family: Monoton;
font-size: 70px;
margin: 0.2em;
}
h2 {
margin: 1em 0 0.25em;
}
h2:first-of-type {
margin-top: 0.5em;
}
table,
tr,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
tr {
height: 20px;
}
td {
width: 20px;
}
input[type=number] {
width: 6em;
}
<!-- no changes made on the HTML nor the CSS part just skip to the JavaScript part -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>
The above demo is definitely not the only possible fix/solution. Also, I tried to keep things simple and understandable. Many possible improvements can be applied to the above demo like using Event Delegation instead of many listener on the table cells.
Learn more about let keyword on MDN.
Learn more about const keyword on MDN.

My Javascript code won't work, what's wrong with it?

My javascript code won't work one bit and I honestly have no idea why. I'm still very new to javascript so if someone can point out where I'm going wrong, I'll very much appreciate it! It's supposed to be a pixel art maker where you can make a table based on user input and color each separate cell.
Edit: Sorry, I should have made myself clearer. For example: entering 5 in 'Grid Height' and 5 in 'Grid Width' then clicking the "Submit" button should produce a 5 x 5 table/grid below 'Design Canvas'. But when I do that, the numbers just resets to 1 and no grid is displayed. Basically, nothing happens. I know I might be missing a lot of code, but no errors are displayed in DevTools. For the color, choosing a color from 'Pick A Color' and then clicking on a cell should only fill that cell. Clicking 'Submit' again should reset the table.
var table = document.getElementById("pixelCanvas");
var height = document.getElementById("inputHeight").value;
var width = document.getElementById("inputWidth").value;
var color = document.getElementById("colorPicker");
var submit = document.getElementById("submit");
var size = document.getElementById("sizePicker");
submit.addEventListener("click", makeGrid);
function makeGrid(height, width) {
height,
width.preventDefault();
table.innerHTML = "";
for (let x = 0; x < height; x++) {
var tr = table.insertRow(x);
for (let y = 0; y < width; y++) {
var td = tr.insertCell(y);
table.appendChild(tr);
td.addEventListener("click", fillCell);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
function fillCell(event) {
event.preventDefault();
event.style.backgroundColor = color.value;
}
body {
text-align: center;
background-color: white;
color: plum;
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-size: 70px;
margin: 0.2em;
}
h2 {
margin: 1em 0 0.25em;
}
h2:first-of-type {
margin-top: 0.5em;
}
table,
tr,
td {
border: 2px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
color: black;
}
tr {
height: 20px;
}
td {
width: 20px;
}
input[type=number] {
width: 6em;
}
<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit" id="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>

When you click on a cell, there is no need to prevent default. You will need to access the event target first, before accessing the style property.
Also, add the submit event to the form, rather than to the button. You can access form elements off of the form, so that you do not need to store so many globals.
const
form = document.getElementById("sizePicker"),
table = document.getElementById("pixelCanvas"),
color = document.getElementById("colorPicker");
form.addEventListener("submit", makeGrid);
function makeGrid(e) {
const
form = e.target,
width = form.elements.inputWidth.value,
height = form.elements.inputHeight.value;
table.innerHTML = "";
for (let x = 0; x < height; x++) {
var tr = table.insertRow(x);
for (let y = 0; y < width; y++) {
var td = tr.insertCell(y);
table.appendChild(tr);
td.addEventListener("click", fillCell);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
function fillCell(e) {
e.target.style.backgroundColor = color.value;
}
body {
text-align: center;
background-color: white;
color: plum;
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-size: 70px;
margin: 0.2em;
}
h2 {
margin: 1em 0 0.25em;
}
h2:first-of-type {
margin-top: 0.5em;
}
table,
tr,
td {
border: 2px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
color: black;
}
tr {
height: 20px;
}
td {
width: 20px;
}
input[type=number] {
width: 6em;
}
<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker" onsubmit="return false;">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1">
Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit" id="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>

They key issue is that you were assigning the value of the inputs to the variables immediately instead of allowing the function to get the values.
Coerce the strings from the values to Numbers, and use those in your loops.
Remove the <form> element completely and change the <input type="submit" /> to a button with a type="button" attribute.
In fillCell use event.target to access the element that was clicked on.
var table = document.getElementById("pixelCanvas");
var height = document.getElementById("inputHeight");
var width = document.getElementById("inputWidth");
var color = document.getElementById("colorPicker");
var submit = document.getElementById("submit");
var size = document.getElementById("sizePicker");
submit.addEventListener("click", makeGrid);
function makeGrid() {
table.innerHTML = "";
for (let x = 0; x < Number(height.value); x++) {
var tr = table.insertRow(x);
for (let y = 0; y < Number(width.value); y++) {
var td = tr.insertCell(y);
table.appendChild(tr);
td.addEventListener("click", fillCell);
tr.appendChild(td);
}
table.appendChild(tr);
}
}
function fillCell(event) {
event.target.style.backgroundColor = color.value;
}
body{text-align:center;background-color:#fff;color:plum;font-family:Roboto,sans-serif}h1{font-family:Roboto,sans-serif;font-size:70px;margin:.2em}h2{margin:1em 0 .25em}h2:first-of-type{margin-top:.5em}table,td,tr{border:2px solid #000}table{border-collapse:collapse;margin:0 auto;color:#000}tr{height:20px}td{width:20px}input[type=number]{width:6em}
<h2>Choose Grid Size</h2>
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<button type="button" id="submit">Submit</button>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>

Creating a colorable, clickable grid (javascript)

I'm working on a school project (the last one in my introduction to programming course). The html and css have been given. We need to allow the user to create a grid and then color boxes to make pixel art.
I've run into two issues.
My table isn't clearing when the user hits submit to create a new table, and
I can't get color into my grids.
I'd really appreciate any help that can be given.
// Select color input
let inputColor = document.getElementById ("colorPicker");
// Select size input
let table = document.getElementById("pixelCanvas");
let iHeight = document.getElementById ("inputHeight");
let iWidth = document.getElementById ("inputWidth");
// Make the grid
let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function(event) {
event.preventDefault();
makeGrid()
});
// When size is submitted by the user, call makeGrid()
function makeGrid() {
const height = iHeight.value;
const width = iWidth.value;
for (var w = 0; w < width; w++){
const row = table.insertRow();
for (var h = 0; h < height; h++){
const cell = row.insertCell();
}
}
let cPicker = document.getElementsByClassName("cell");
cPicker.addEventListener("click", function (event) {
event.preventDefault();
cell.style.backgroundColor = inputColor;
document.appendChild("cell");
table.innerHTML = grid;
});
}
The rest of the code is here:
https://github.com/shearda/pixelartmaker/

By your words, I am assuming that you want that
When you Click on Submit it should reset the existing table.
When You change the color and click on any cell that cell be filled with selected color only.
I made little changes to js and html file,
Html file change: replace table with div of same id,
JS change you were attaching event listener incorrectly,
/* you didn't attach any class to your cell so you will get null in this,
and getByClassName returns list of elements so you need to iterate over the list to attach event
*/
let cPicker = document.getElementsByClassName("cell");
cPicker.addEventListener("click", function (event) {
event.preventDefault();
cell.style.backgroundColor = inputColor;
document.appendChild("cell");
table.innerHTML = grid;
});
Give this a try
// Select color input
let inputColor = document.getElementById("colorPicker");
// Select size input
let tableCanvas = document.getElementById("pixelCanvas");
let iHeight = document.getElementById("inputHeight");
let iWidth = document.getElementById("inputWidth");
// Make the grid
let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function (event) {
event.preventDefault();
makeGrid()
});
// When size is submitted by the user, call makeGrid()
function makeGrid() {
let table = document.createElement('table')
const height = iHeight.value;
const width = iWidth.value;
for (let w = 0; w < width; w++) {
const row = table.insertRow();
for (let h = 0; h < height; h++) {
const cell = row.insertCell();
cell.addEventListener("click",event=>{
event.preventDefault();
event.target.style.backgroundColor = inputColor.value
})
}
}
let children = tableCanvas.childNodes? tableCanvas.childNodes:[]
if(children && children.length===1){
tableCanvas.replaceChild(table,children[0])
}else{
tableCanvas.append(table)
}
}
body {
text-align: center;
}
h1 {
font-family: Monoton;
font-size: 70px;
margin: 0.2em;
}
h2 {
margin: 1em 0 0.25em;
}
h2:first-of-type {
margin-top: 0.5em;
}
table,
tr,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
tr {
height: 20px;
}
td {
width: 20px;
}
input[type=number] {
width: 6em;
}
<!DOCTYPE html>
<html>
<head>
<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1">
Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<div id="pixelCanvas"></div>
<script src="designs.js"></script>
</body>
</html>

Fortunately, I was able to solve your problem.
If you need more explanation, leave a comment below this answer so I can explain...
let table = document.getElementById("pixelCanvas");
let iHeight = document.getElementById ("inputHeight");
let iWidth = document.getElementById ("inputWidth");
let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function(event) {
event.preventDefault();
makeGrid()
});
function makeGrid() {
table.innerHTML = '';
const height = iHeight.value;
const width = iWidth.value;
let inputColor = document.getElementById("colorPicker").value;
for (var w = 0; w < width; w++){
const row = table.insertRow();
for (var h = 0; h < height; h++){
row.insertCell().style.backgroundColor = inputColor;
}
}
}
body {
text-align: center;
}
h1 {
font-family: Monoton;
font-size: 70px;
margin: 0.2em;
}
h2 {
margin: 1em 0 0.25em;
}
h2:first-of-type {
margin-top: 0.5em;
}
table,
tr,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
tr {
height: 20px;
}
td {
width: 20px;
}
input[type=number] {
width: 6em;
}
<!DOCTYPE html>
<html>
<head>
<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1">
Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>
<script src="designs.js"></script>
</body>
</html>

Why a clicked cell does not get the background color?

I am Trying to create a pixel art app.
I managed to create a table dynamically according to user's input.
When I click a specific cell, it does not get the color assigned to it by the click event - event.target.bgcolor = "#ff0000";
However,looking at the debugger, it shows that event.target.bgcolor does get the color,
What needs to be changed?
For testing purposes I assigned "#ff0000".
var rows; //why when define as const --> get error
var columns;
var selectedColor = '#000000';
var colorPicker;
var grid;
colorPicker = document.querySelector('.colorPicker');
/*EventLstener for Color Selection */
colorPicker.addEventListener('change', function(event) {
selectedColor = event.target.value;
console.log(selectedColor);
})
/************************
Create the grid function
************************/
function makeGrid() {
resetGrid()
rows = document.querySelector('.inputRow').value;
console.log(rows);
columns = document.querySelector('.inputCol').value;
console.log(columns);
grid = document.querySelector('.grid');
for (let x = 1; x <= rows; x++) {
let newTR = document.createElement("tr");
newTR.className = "tr"; //assign class
grid.appendChild(newTR);
for (let y = 1; y <= columns; y++) {
let newTD = document.createElement("td");
newTD.className = "td"; //assign class
newTR.appendChild(newTD);
newTD.addEventListener('click', function(event) {
console.log("cell clicked")
// event.target.style.backgroundcolor = "#ff0000";
event.target.bgcolor = "#ff0000";
})
}
}
}
/**************************
Set the color of a grid cell
***************************/
/**********************************
Define a function to reset the grid
***********************************/
function resetGrid() {
//using jQuery to reset the grid
$('tr').remove();
$('td').remove();
document.querySelector('.colorPicker').value = "#000000";
}
makeGrid();
resetGrid()
body {
/* margin: 0; */
/* padding: 0; */
text-align: center;
}
h1 {
font-family: "Comic Sans MS";
font-size: 2.8rem;
font-weight: 4rem;
margin-top: 1rem;
margin-bottom: 0.2rem;
color: slateblue;
}
td,
tr {
border: 1px solid black;
}
table {
border-collapse: collapse;
margin: 0 auto;
/* border: 3px solid red; */
}
tr {
height: 20px;
}
td {
width: 20px;
}
.inputRow,
.inputCol {
width: 60px;
margin-right: 15px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pixel Art Maker</title>
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootsrap Latest compiled and minified CSS -->
<!-- To ensure proper rendering and touch zooming-->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Pixel Art Maker</h1>
<h2>Choose Your Grid Size</h2>
<form class=g ridInput>
Set Grid Rows
<input type="number" class="inputRow" name="rows" id="#inputRow" value="0" min="1"> Set Grid Columns
<input type="number" class="inputCol" name="columns" id="#inputCol" value="0" min="1">
<button type="button" class="submitData" onclick="makeGrid()">Click to Generate Grid</button>
<button type="button" class="resetGrid" onclick="resetGrid()">Click to Reset Grid</button>
</form>
<h3>Pick A Color</h3>
<!-- Set the color picker -->
<input type="color" class="colorPicker">
<h2>Design Canvas</h2>
<table class="grid" id="#mytable"></table>
<script src="myscripts.js"></script>
</body>
</html>

The code you've commented out is very close, however it should be backgroundColor (note the capital C).
event.target.style.backgroundColor = "#ff0000";
I'm voting to close this as a "simple typographical error".

showing div after activating a function

I need help on how to show a div that I'm suppose to hide. The idea is that when the object is dragged to the droppable, it will trigger the quiz which is stored on the div "wrapper". I can hide the div but how do I show it when the dragItem_ts(); is done. Please help.
dragItem_ts();
dragItem2();
function dragItem_ts() {
$(function() {
$("#draggable_ts, #draggable-nonvalid").draggable();
$("#droppable").droppable({
accept: "#draggable_ts",
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Correct!")
.alert("I am an alert box!");
}
});
});
}
function dragItem2() {
$(function() {
$("#draggable2, #draggable-nonvalid").draggable();
$("#droppable2").droppable({
accept: "#draggable2",
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Correct!");
}
});
});
}
function tabulateAnswers() {
// initialize variables for each choice's score
// If you add more choices and outcomes, you must add another variable here.
var c1score = 0;
var c2score = 0;
var c3score = 0;
var c4score = 0;
// get a list of the radio inputs on the page
var choices = document.getElementsByTagName('input');
// loop through all the radio inputs
for (i = 0; i < choices.length; i++) {
// if the radio is checked..
if (choices[i].checked) {
// add 1 to that choice's score
if (choices[i].value == 'c1') {
c1score = c1score + 1;
}
if (choices[i].value == 'c2') {
c2score = c2score + 1;
}
if (choices[i].value == 'c3') {
c3score = c3score + 1;
}
if (choices[i].value == 'c4') {
c4score = c4score + 1;
}
// If you add more choices and outcomes, you must add another if statement below.
}
}
// Find out which choice got the highest score.
// If you add more choices and outcomes, you must add the variable here.
var maxscore = Math.max(c1score, c2score, c3score, c4score);
// Display answer corresponding to that choice
var answerbox = document.getElementById('answer');
if (c1score == maxscore) { // If user chooses the first choice the most, this outcome will be displayed.
answerbox.innerHTML = "You are correct"
}
if (c2score == maxscore) { // If user chooses the second choice the most, this outcome will be displayed.
answerbox.innerHTML = "The correct answer is stvsp#am.sony.com"
}
if (c3score == maxscore) { // If user chooses the third choice the most, this outcome will be displayed.
answerbox.innerHTML = "The correct answer is stvsp#am.sony.com"
}
if (c4score == maxscore) { // If user chooses the fourth choice the most, this outcome will be displayed.
answerbox.innerHTML = "The correct answer is stvsp#am.sony.com"
}
// If you add more choices, you must add another response below.
}
// program the reset button
function resetAnswer() {
var answerbox = document.getElementById('answer');
answerbox.innerHTML = "Your result will show up here!";
}
#droppable,
#droppable2 {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
#draggable_ts,
#draggable2,
#draggable-nonvalid {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
body {
font-family: sans-serif;
background: green;
}
h2 {
margin: 5px 0;
}
#wrapper {
width: 600px;
margin: 0 auto;
background: white;
padding: 10px 15px;
border-radius: 10px;
}
input {
margin: 5px 10px;
}
button {
font-size: 18px;
padding: 10px;
margin: 20px 0;
color: white;
border: 0;
border-radius: 10px;
border-bottom: 3px solid #333;
}
#submit {
background: green;
}
#reset {
background: red;
}
#answer {
border: 1px dashed #ccc;
background: #eee;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Droppable - Accept</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src=javascript/functions.js>
</script>
</head>
<body>
<div id="draggable-nonvalid" class="ui-widget-content">
<p>I'm draggable but can't be dropped</p>
</div>
<div id="draggable_ts" class="ui-widget-content">
<img src="images/ts_image02.jpg">
</div>
<div id="draggable2" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>accept: '#draggable'</p>
</div>
<div id="droppable2" class="ui-widget-header">
<p>accept: '#draggable2'</p>
</div>
<div id="droppable3" class="ui-widget-header">
<p>accept: '#draggable2'</p>
</div>
<div id="wrapper">
<h1>What is the email address that the customer should send them to?</h1>
<form id="quiz">
<!-- Question 1 -->
<!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
<!-- The value is which answer the choice corresponds to. -->
<label><input type="radio" name="q1" value="c1">
stvsp#am
</label><br />
<label><input type="radio" name="q1" value="c2">
svtsp#am
</label><br />
<label><input type="radio" name="q1" value="c3">
mydocs#am
</label><br />
<label><input type="radio" name="q1" value="c4">
docs#am
</label><br />
<button type="submit" id="submit" onclick="tabulateAnswers()">Submit Your Answers</button>
<button type="reset" id="reset" onclick="resetAnswer()">Reset</button>
</form>
<div id="answer">Your result will show up here!</div>
</div>
</body>
</html>

in the css class of your div you need to set :
display : none;
when dragItem_ts(); is done. just call this function below :
var e = document.getElementsByClassName("your_div")[0];
e.style.display="block";