I'm trying to add a table that will enable each cell to turn a color when clicked (like a pixel grid), but i'm having a bit of a difficult time trying to assign the data from a form to a jQuery variable.
I haven't had any problems with any syntax as there aren't any errors thrown up
To generate the table, I don't really know how to do this in jquery, so I just used regular vanilla js instead.
Any ideas?
$(function(){
var color, height, width;
function makeGrid(){
var table = $('pixel_canvas');
height = $("#input_height").val();
width = $("#input_width").val();
color = $("#colorPicker").val();
console.log(color);
console.log(width);
console.log(height);
for (var i = 0; i<height; i++){
row = table.insertRow(i);
for(var j = 0; j<width; j++){
pixel = row.insertCell(j);
$(pixel).css({
'border': 'black solid 1px'
});
console.log(pixel);
$(pixel).on("click", function(){
$(this).css({'background-color':'color'});
})
}
}
}
$("#sizePicker").on('submit', function(){
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;
}
<!DOCTYPE html>
<html>
<head>
<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height:
<input type="number" id="input_height" name="height" min="1" value="1">
Grid Width:
<input type="number" id="input_width" 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="pixel_canvas"></table>
<script src="designs.js"></script>
</body>
</html>
Related
I currently practicing HTML/CSS/DOM(JS) and more focusing on DOM right now. For now, I try to clone the instagram for studying HTML/CSS/DOM. In the DOM part(js), when I try to use event(EventListener), I am curious that "If the other project or Website need so many EventListener,Do I have to declare name.addEventListener("event name", function()) every-time? Can I declare the EventListener at the body or wrapper(div-class) and using event.target, so I don't need to be declared EventListener several times?" I am sorry if I explain so weird and messy. I tried to explain my brain storming thought. I will share my code just in case
This is HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Westagram!
</title>
<link rel="stylesheet" href="style/login.css" type="text/css">
<link rel="stylesheet" href="style/common.css" type="text/css">
<!-- <link rel="stylesheet" href="js/login.js"> -->
</head>
<body>
<!-- 아래 모든 div들을 포함하는 제일 상위 Container -->
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<!-- 로그인 섹션 -->
<div class="login-container">
<div class="id">
<input type="text" id="text" placeholder="Phone number, username, or email" />
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password">
</div>
<div class="bt">
<button class="login-btn">Log in
</button>
</div>
</div>
<!-- 비밀번호 찾는 섹션 -->
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</html>
This is CSS file
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
#font-face {
font-family: instagramFont;
src: url("../src/westagram.ttf") format("opentype");
}
.wrapper {
margin: 250px 250px 0px 250px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border: solid 1px #D3D3D3;
width: 500px;
height: 500px;
}
.wrapper .login-container {
width: 400px;
height: 500px;
}
.wrapper .login-container .id{
margin-top: 70px;
}
#text {
width: 100%;
height: 45px;
border: solid 1px #D3D3D3;
border-radius: 5px;
padding-left: 15px;
}
#password {
width: 100%;
height: 45px;
border: solid 1px #D3D3D3;
border-radius: 5px;
padding-left: 15px;
}
.wrapper .login-container .bt .login-btn{
width: 100%;
height: 45px;
border: solid 1px #D3D3D3;
border-radius: 5px;
/*background-color: #ff000;*/
background-color: #B2DFFC;
cursor: pointer;
/*padding-left: 15px;*/
}
.wrapper .login-container .pw {
margin-top: 10px;
margin-bottom: 10px;
}
.wrapper .login-container.bt {
}
.westagram {
font-size : 60%;
font-family: instagramFont;
font-size: 5rem;
}
This is JS code
let id = document.querySelector("#text");
let password = document.querySelector("#password");
let loginButton = document.querySelector(".login-btn")
function active() {
if(id.value.length > 0 && password.value.length > 0){
loginButton.style.backgroundColor='#0095F6';
} else {
loginButton.style.backgroundColor='#B2DFFC'
}
}
id.addEventListener("keyup", active)
password.addEventListener("keyup", active)
I really appreciate your help in advance!
Can you add one event listener? Yes. It is event delegation. You use the target and you do checks to see if it is the element. Multiple ways to check if the element is the same. You can use is(), you can check a class/id/attribute or you can see if the elements match a reference
document.body.addEventListener("input", function (evt) {
const target = evt.target;
if (target.closest('#inp1, #inp2')) {
console.log(target.value);
}
});
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />
document.body.addEventListener("input", function (evt) {
const target = evt.target;
if (target.classList.contains("loginInput")) {
console.log(target.value);
}
});
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />
var inp1 = document.querySelector("#inp1");
var inp2 = document.querySelector("#inp2");
document.body.addEventListener("input", function(evt) {
const target = evt.target;
if (target === inp1 || target === inp2) {
console.log(target.value);
}
});
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />
In the inputs are in the same container, you might not even care what input it is. Just bind the event listener to the parent. Any action inside of it will be picked up.
document.querySelector('#login').addEventListener("input", function(evt) {
const target = evt.target;
console.log(target.value);
});
<form id="login">
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />
</form>
You can write a function to prevent repeating exactly the same event listeners:
function eventHandler(event, func, target ){
return target.addEventListener(event, func);
}
eventHandler("keyup", active, id);
So I taught myself coding a few years ago, and got it just enough to put together a few tools for work. I recently had to migrate my site out of CodePen and onto an actual web server. Now I'm having an issue where part of my javascript is executing properly (a portion that empties all other input fields when a user enters an input field using JQuery), but the button that calculates an answer will not work. I believe the .click is not picking it up. Either way I'm not getting error messages, the button just does nothing when I press it.
When I put the code in a snippet to share with you guys, it works (just like it did in CodePen), but the exact same code on my web host does not work. I'm really at a loss here and any help would be greatly appreciated. I feel like I'm missing some small line of code that's supposed to be included in all web files.
$(document).ready(function() {
//Clear out input fields when not selected
$("#sg").focusin(function() {
$("#density").val("");
});
$("#density").focusin(function() {
$("#sg").val("");
});
$("#pounds").focusin(function() {
$("#grams").val("");
$("#percentage").val("");
});
$("#grams").focusin(function() {
$("#percentage").val("");
$("#pounds").val("");
});
$("#percentage").focusin(function() {
$("#pounds").val("");
$("#grams").val("");
});
$(".input_field").focusin(function() {
$("#density").removeClass('highlight');
$("#sg").removeClass('highlight');
$("#pounds").removeClass('highlight');
$("#grams").removeClass('highlight');
$("#percentage").removeClass('highlight');
});
//Calculate on press of enter
$("#button").keypress(function(e) {
if (e.which == 13) {
alert("this is working");
}
});
$("#button").click(function() {
calculateButton();
});
//Calculate values on button hit
function calculateButton() {
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
function removeCommas(x) {
x = x.replace(",", "");
return x;
}
var results = 0;
//Pulling information from input cells
var densityStr = document.getElementById("density").value;
var sgStr = document.getElementById("sg").value;
var poundsStr = document.getElementById("pounds").value;
var gramsStr = document.getElementById("grams").value;
var percentageStr = document.getElementById("percentage").value;
//remove commas from string and then convert string to number
var densityNum = Number(removeCommas(densityStr));
var sgNum = Number(removeCommas(sgStr));
var poundsNum = Number(removeCommas(poundsStr));
var gramsNum = Number(removeCommas(gramsStr));
var percentageNum = Number(removeCommas(percentageStr));
if (densityStr.length !== 0) {
var sgConversion = densityNum / 8.3454;
$("#sg").val(sgConversion.toFixed(3));
$("#density").addClass('highlight');
} else if (sgStr.length !== 0) {
var densityConversion = sgNum * 8.3454;
$("#density").val(densityConversion.toFixed(3));
$("#sg").addClass('highlight');
}
if (poundsStr.length !== 0) {
$("#pounds").addClass("highlight");
densityNum = document.getElementById("density").value;
var gramsConversion = poundsNum * 119.83;
var percentageConversion = poundsNum / densityNum * 100;
$("#grams").val(gramsConversion.toFixed(0));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (gramsStr.length !== 0) {
$("#grams").addClass("highlight");
densityNum = document.getElementById("density").value;
var poundsConversion = gramsNum / 119.83;
var percentageConversion = poundsConversion / densityNum * 100;
$("#pounds").val(poundsConversion.toFixed(2));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (percentageStr.length !== 0) {
$("#percentage").addClass("highlight");
densityNum = document.getElementById("density").value;
var percentageDec = percentageNum / 100;
var poundsConversion = densityNum * percentageDec;
var gramsConversion = poundsConversion * 119.83;
$("#pounds").val(poundsConversion.toFixed(2));
$("#grams").val(gramsConversion.toFixed(2));
}
}
});
body {
margin: 0;
font-family: 'Lato', sans-serif;
background: #d2d2d2;
}
p {
text-align: center;
}
conatiner {
max-width: 1024px;
margin: 0 auto;
}
#navbarContainer {
background: #F44336;
overflow: hidden;
width: 100%;
margin: 0;
}
.navbar {
float: left;
display: block;
font-family: 'Lato', sans-serif;
height: 40px;
width: 200px;
line-height: 40px;
text-align: center;
background: #F44336;
text-decoration: none;
color: #212121;
}
.navbar:hover {
background: #E57373;
color: white;
}
.active {
background: #C62828;
color: white;
}
#formContainer {
width: 450px;
background: #FDFFFC;
margin: 50px auto;
padding: 0px;
border-radius: 8px;
overflow: hidden;
}
#formContainer header {
width: 100%;
height: 130px;
background-color: #3cba54;
overflow: auto;
color: white;
}
header h1 {
margin: 35px 0 0 0;
text-align: center;
line-height: 30px;
}
header h3 {
line-height: 40px;
text-align: center;
margin: 0;
}
#heading {
background-color: #3cba54;
height: 40px;
color: white;
margin-bottom: 25px;
margin-left: -30px;
}
#heading h3 {
line-height: 40px;
}
form {
padding: 20px 0 0 20px;
text-align: center;
}
label {
display: inline-block;
width: 220px;
text-align: right;
}
#myForm .input_field {
margin-left: 20px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 10px;
width: 125px;
height: 35px;
font-size: 17px;
border-radius: 3px;
background-color: #E0E0E0;
border: none;
}
#button {
display: block;
border-radius: 6px;
width: 200px;
height: 50px;
padding: 8px 15px 8px 15px;
margin: 0 auto;
margin-bottom: 50px;
font-size: 16px;
box-shadow: 0 6px #540000;
background-color: #FF3636;
border: none;
outline: none;
}
#button:active {
background-color: #B81B1B;
box-shadow: 0 1px #27496d;
transform: translateY(5px);
}
.highlight {
background: #FFEB3B !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
</body>
</html>
Sometimes putting script tags before the elements on the page can cause issues. You can try to put the scripts at the bottom of the body like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I am trying to change the div's background colour using inputs from the radio buttons but I struggle to change colours in reverse order e.g. (pink to black ) or (green to yellow). It works perfectly fine when I try to change colour in order e.g. (black to red) or (red to yellow). I have used console.log to check the variable when I click on a different radio button and it is changing accordingly.
Many thanks
const container = document.querySelector(".container");
const cell = document.querySelector(".cell");
// var rows = 16; //default grid = 16x16
// var cols = 16;
var rows = 16;
var cols = 16;
function makeGrid(rows, cols) {
container.style.setProperty("--rows", rows);
container.style.setProperty("--cols", cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "cell";
container.appendChild(cell).id = i + 1;
};
};
function modifyCell() {
$(document).ready(function() {
var radioValue = $('input[type=radio]:checked').val();
switch (radioValue) {
case 'black':
// console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-black');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-black');
});
break;
case 'red':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-red');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-red');
});
break;
case 'pink':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-pink');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-pink');
});
break;
case 'yellow':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-yellow');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-yellow');
});
break;
case 'green':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-green');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-green');
});
break;
case 'blue':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-blue');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-blue');
});
break;
case 'violet':
console.log(radioValue);
$(".cell").on("mousedown", function() {
$(this).removeClass('cell').addClass('cell-violet');
})
.on("mouseup", function() {
$(this).removeClass('cell').addClass('cell-violet');
});
break;
default:
alert("!");
};
});
};
function reset() {
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
function resetGrid() {
rows = prompt('Enter a number for grid size. (min = 1, max = 50)');
cols = rows;
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
makeGrid(rows, cols);
modifyCell();
$('input[type=radio]').on('change', function() {
modifyCell();
});
html {
background-image: linear-gradient(45deg, purple, pink);
justify-items: center;
}
header {
margin-bottom: 10px;
padding: 3px;
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: purple;
border: 5px thin purple;
border-radius: 10px;
width: 93vw;
background-color: white;
}
.container {
background-color: white;
display: grid;
margin: 2px;
border: 3px solid purple;
border-radius: 10px;
padding: 6px;
justify-content: center;
width: 90vw;
height: 90vw;
grid-template-rows: repeat(var(--rows), 1fr);
grid-template-columns: repeat(var(--cols), 1fr);
grid-gap: 1px;
}
.container .cell {
background-color: gray;
opacity: 0.3;
}
.container .cell:hover {
background-color: hsl(30, 0%, 95%);
opacity: 1;
}
.container .cell-black {
background-color: black;
opacity: 1;
}
.container .cell-red {
background-color: red;
opacity: 1;
}
.container .cell-pink {
background-color: pink;
opacity: 1;
}
.container .cell-yellow {
background-color: yellow;
opacity: 1;
}
.container .cell-green {
background-color: green;
opacity: 1;
}
.container .cell-blue {
background-color: blue;
opacity: 1;
}
.container .cell-violet {
background-color: violet;
opacity: 1;
}
.button {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
}
.button:hover {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
background-color: pink;
}
.radio {
border: 2px solid black;
border-radius: 10px;
box-sizing: border-box;
background-color: white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Etch-a-Sketch</title>
</head>
<header>
Etch-a-Sketch
</header>
<body>
<input class="button" type="button" value="Reset Grid" onclick="resetGrid()">
<input class="button" type="button" value="Clear" onclick="reset()">
<div class="container">
</div>
<div class="radio">
<input type="radio" id="black" name="colour" value="black" checked>
<label for="black">Black</label>
<input type="radio" id="red" name="colour" value="red">
<label for="red">Red</label>
<input type="radio" id="pink" name="colour" value="pink">
<label for="pink">Pink</label>
<input type="radio" id="yellow" name="colour" value="yellow">
<label for="yellow">Yellow</label>
<input type="radio" id="green" name="colour" value="green">
<label for="green">Green</label>
<input type="radio" id="blue" name="colour" value="blue">
<label for="blue">Blue</label>
<input type="radio" id="violet" name="colour" value="violet">
<label for="violet">Violet</label>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
You need to remove all the other cell-<color> classes when adding the new color, not just the cell class.
You shouldn't add new event handlers every time the user selects a different radio button. Just have the event handler get the color from the selected radio button.
And instead of using switch/case, you can concatenate the button value to cell- to get the new class to add.
I'm not sure why you had both mousedown and mouseup handlers, since they both did the same thing. So I combined them into a single click handler.
const container = document.querySelector(".container");
const cell = document.querySelector(".cell");
// var rows = 16; //default grid = 16x16
// var cols = 16;
var rows = 16;
var cols = 16;
function makeGrid(rows, cols) {
container.style.setProperty("--rows", rows);
container.style.setProperty("--cols", cols);
for (i = 0; i < (rows * cols); i++) {
let cell = document.createElement("div");
container.appendChild(cell).className = "cell";
container.appendChild(cell).id = i + 1;
};
};
function modifyCell() {
$(document).ready(function() {
$(".cell").on("click", function() {
var radioValue = $('input[type=radio]:checked').val();
$(this).removeClass("cell cell-black cell-red cell-pink cell-yellow cell-green cell-blue cell-violet").addClass("cell-" + radioValue);
});
});
}
function reset() {
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
function resetGrid() {
rows = prompt('Enter a number for grid size. (min = 1, max = 50)');
cols = rows;
$(document).ready(function() {
while (container.firstChild) {
container.firstChild.remove();
};
makeGrid(rows, cols);
modifyCell();
});
};
makeGrid(rows, cols);
modifyCell();
html {
background-image: linear-gradient(45deg, purple, pink);
justify-items: center;
}
header {
margin-bottom: 10px;
padding: 3px;
text-align: center;
font-family: sans-serif;
font-size: 30px;
color: purple;
border: 5px thin purple;
border-radius: 10px;
width: 93vw;
background-color: white;
}
.container {
background-color: white;
display: grid;
margin: 2px;
border: 3px solid purple;
border-radius: 10px;
padding: 6px;
justify-content: center;
width: 90vw;
height: 90vw;
grid-template-rows: repeat(var(--rows), 1fr);
grid-template-columns: repeat(var(--cols), 1fr);
grid-gap: 1px;
}
.container .cell {
background-color: gray;
opacity: 0.3;
}
.container .cell:hover {
background-color: hsl(30, 0%, 95%);
opacity: 1;
}
.container .cell-black {
background-color: black;
opacity: 1;
}
.container .cell-red {
background-color: red;
opacity: 1;
}
.container .cell-pink {
background-color: pink;
opacity: 1;
}
.container .cell-yellow {
background-color: yellow;
opacity: 1;
}
.container .cell-green {
background-color: green;
opacity: 1;
}
.container .cell-blue {
background-color: blue;
opacity: 1;
}
.container .cell-violet {
background-color: violet;
opacity: 1;
}
.button {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
}
.button:hover {
border: 2px solid black;
border-radius: 20px;
font-size: 15px;
background-color: pink;
}
.radio {
border: 2px solid black;
border-radius: 10px;
box-sizing: border-box;
background-color: white;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Etch-a-Sketch</title>
</head>
<header>
Etch-a-Sketch
</header>
<body>
<input class="button" type="button" value="Reset Grid" onclick="resetGrid()">
<input class="button" type="button" value="Clear" onclick="reset()">
<div class="container">
</div>
<div class="radio">
<input type="radio" id="black" name="colour" value="black" checked>
<label for="black">Black</label>
<input type="radio" id="red" name="colour" value="red">
<label for="red">Red</label>
<input type="radio" id="pink" name="colour" value="pink">
<label for="pink">Pink</label>
<input type="radio" id="yellow" name="colour" value="yellow">
<label for="yellow">Yellow</label>
<input type="radio" id="green" name="colour" value="green">
<label for="green">Green</label>
<input type="radio" id="blue" name="colour" value="blue">
<label for="blue">Blue</label>
<input type="radio" id="violet" name="colour" value="violet">
<label for="violet">Violet</label>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
What I am trying to do is when I click the submit button it puts all the name and first name in large text into the div contactcard1 , when they click see description it switches to contactcard2, I need the info for description to show in contactcard2, as well as every time the info gets submitted on the left it makes a new box dynamically on the page that does the same as the contact 1 and 2 box. I have got most of this working but can't seem to get those functions working. I did get document.on turned on so i can use the features. But would appropriate any help in getting this fixed.
My HTML
!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css"></style>
<script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#tabletop');
$('.button').click(function() {
var row = tabletop.insertRow();
['1stname', '2ndname', '3rdname', '4thname'].forEach(function(elementId) {
var cell = row.insertCell();
cell.innerHTML = document.getElementById(elementId).value;
});
});
});
function switchVisible() {
if (document.getElementById('contactcard1') !== undefined) {
if (document.getElementById('contactcard1').style.display == 'block') {
document.getElementById('contactcard1').style.display = 'none';
document.getElementById('contactcard2').style.display = 'block';
} else {
document.getElementById('contactcard1').style.display = 'block';
document.getElementById('contactcard2').style.display = 'none';
}
}
}
$('button').append('#maindiv')
$(document).on()
</script>
</head>
<body>
<div id='wrapper'>
<div id='container1'></div>
<div id=maindiv>
<div id='container2'>
<form id='form1'>
First name:<br>
<input id='1stname' type="text" name="firstname" value="First Name">
<br> Last name:<br>
<input id='2ndname' type="text" name="lastname" value="Last Name">
<br> Description:<br>
<input id='3rdname' type="text" name="description" value="Description">
</form>
<button class='button'>Submit</button>
</div>
<div id='container3'>
<div id='contactcard1'>
<table id='tabletop'>
<tr>
<th id='first'>First Name</th>
<th id='last'>Last Name</th>
<input id="Button1" type="button" value="See My Description" onclick="javascript:switchVisible();" />
</tr>
</table>
</div>
<div id='contactcard2'>
<table id='tabletop1'>
<tr>
<th id='description'>Description</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
MY CSS
*
#wrapper{
width: 800px;
margin: 0 auto;
overflow: hidden;
border: 1px solid black ;
}
#container1{
width: 800px;
height: 100px;
display: inline-block;
border: 1px solid black ;
}
#container2{
width: 200px;
height: 500px;
display: inline-block;
border: 1px solid black ;
margin: 0 auto;
}
#container3{
width: 580px;
height: 500px;
display: inline-block;
border: 1px solid black ;
vertical-align: top;
}
#form1{
margin-top: 100px;
}
#contactcard1{
width: 350px;
height: 150px;
display: inline-block;
border: 1px solid black;
margin-left: 100px;
}
#contactcard2{
width: 350px;
height: 150px;
display: none;
border: 1px solid black;
margin-left: 100px;
}
#button1{
vertical-align: bottom;
}
There are a lot of thing you need to do here.
I created a fiddle for you as a working version. Take a look and let me know if you don't understand.
https://jsfiddle.net/0433Lo2u/
$(document).ready(function() {
document.getElementById('contactcard1').style.display = 'block';
$('.button').click(function() {
var row = undefined;
if (document.getElementById('contactcard1').style.display == 'block') {
row = tabletop.insertRow();
}else{
row = tabletop1.insertRow();
}
['1stname', '2ndname', '3rdname'].forEach(function(elementId) {
var cell = row.insertCell();
cell.innerHTML = document.getElementById(elementId).value;
});
});
$('#Button1').click(function(){
if (document.getElementById('contactcard1') !== undefined) {
if (document.getElementById('contactcard1').style.display == 'block') {
document.getElementById('contactcard1').style.display = 'none';
document.getElementById('contactcard2').style.display = 'block';
} else {
document.getElementById('contactcard1').style.display = 'block';
document.getElementById('contactcard2').style.display = 'none';
}
}
})
});
I am trying to get my document.on function to work when the user clicks on the p tag that has a class called card. So far the function is non responsive. What should I change so the function will respond when I click on the p tag that has a class called card. Here is my HTML and JQuery code.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append("<p class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></p><p class='back'>"+desc+"</p>");
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
Here is my css code
*{
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper{
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left{
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right{
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p{
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email{
margin-left: 45px;
}
button{
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card{
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back{
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea{
border: 2px solid black;
}
Somehow the p.class you were appending was broken, it was below the other elements and was not being identified as the sender by jQuery event.
The following works fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
var p = $('<p class="card">');
p.append("<h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p>");
$('div.right').append(p);
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
your code were not right , the appending elements not formatted as your wish , thats why the click function not working, check the below snippt i have fixed your code, hope fully this will help you
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append('<p class="card"></p>');
$('.card').html("<h1> first +' '+last</h1><h4>Click for description!'</h4><p class='back'>+desc+</p>"
);
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
* {
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper {
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left {
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right {
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p {
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email {
margin-left: 45px;
}
button {
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card {
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back {
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea {
border: 2px solid black;
}
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name:
<input type="text" name="fname" class="first">
</p>
<p >Last name:
<input type="text" name="lname" class="last">
</p>
<p class="desc">Description:</p>
<p>
<textarea rows="4" cols="50"></textarea>
</p>
<button>Add User</button>
</form>
</div>
<div class="right"> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
looks like You're misusing the header tags.
I tried your DOM structure, and what's happening is that when Firefox/Chrome sees an invalid <h1> tag inside the <p>, it automatically closes the <p> tag. You can clearly see this in Developer Tools.
You should use <span> tags instead of header tags, check this it Works here
JS CODE:
$('div.right')
.append('<p class="card"><span>'+first+'<==>'+last+'</span>Click for Description!!!</p>');
Using developer tools inpsection, you'll see your added html is
<p class="card"></p><h1> </h1><h4>'Click for description!'</h4><p></p><p class="back"></p>`
No matter what I've tried, I can't get Firefox to create insert that html as you want it!! it's like it doesn't want to put h1/h4 inside a p so decides to close the p early!
change to
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></div><p class='back'>"+desc+"</p>");
and it all goes good - indeed, it's odd, that you already have css for div.card, but not p.card!!
You could do it in Javascript and impliment jquery in the function:
var div = document.getElementById('someid');
function foo(e) {
//Jquery Here
}
div.addEventListener('click', foo);
This is what I use for a lot of my functions.
Wrap card with <div/> instead of <p/> and it should work. As you have other block elements inside <p/>. It's breaking your html.
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p></div>");
And then change 'p.card' to 'div.card'.