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';
}
}
})
});
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);
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>
I have a #main-container with groups of input type checkboxes. These checkboxes open up button lists when checked.
The #main-container that holds all of this can be closed by a button. The problem I have is how do I make this button that closes #main-container also uncheck any checkboxes that are left checked when the #main-container is closed?
At the bottom I have included the only way I know to do it with Javascript at the moment, but that means making a variable for each checkbox and that checkbox must have a unique ID. I am trying to avoid that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input checkbox</title>
<style>
body {
margin: 0;
background: beige;
border: 1px solid blue;
}
.main-container {
border: 1px solid red;
width: 25%;
position: relative;
}
.toggle-box {
display: none;
}
label {
margin: 0.2em;
display: block;
text-align: center;
transition: all 1s linear;
border: 1px solid green;
}
.toggle-box + div {
display: none;
margin: 0.2em;
text-align: center;
}
.toggle-box:checked + div {
display: block;
border: 1px solid black;
transition: all 1s linear;
}
button {
display: block;
margin: auto;
width: 100%;
}
</style>
</head>
<body>
<div id="main-container" class="main-container">
<label for="toggle-box">A</label>
<input class="toggle-box" id="toggle-box" type="checkbox" >
<div>
<button type="button">submit</button>
<button type="button">submit</button>
</div>
<label for="toggle-box2">B</label>
<input class="toggle-box" id="toggle-box2" type="checkbox" >
<div>
<button type="button">submit</button>
<button type="button">submit</button>
</div>
<div></div>
<div></div>
<div class="test1"></div>
</div>
<button type="button" onclick="closeMe()">close</button>
<button type="button" onclick="openMe()">open</button>
<script>
function closeMe() {
var $toggleBox = document.getElementById("toggle-box");
$toggleBox.checked = false;
document.getElementById("main-container").style.display = "none";
}
function openMe() {
document.getElementById("main-container").style.display = "block";
}
</script>
</body>
</html>
function closeMe() {
var $toggleBoxes = document.querySelectorAll(".toggle-box");
$toggleBoxes.forEach(function(box){
box.checked = false;
});
document.getElementById("main-container").style.display = "none";
}
document.querySelectorAll return an array of all the matched element (match with a css selector). Then, we loop through all those elements using forEach (you can use a for loop instead if you want).
You can use document.querySelectorAll to select all checkboxes for example:
var cbks = document.querySelectorAll('.toggle-box');
cbks.forEach(function(val){
val.checked = true;
});
You can select all the checkboxes by getElementsByClassName and then iterate over all the check box and set the checked value to false.
var $toggleBoxes = document.getElementsByClassName("toggle-box");
[].forEach.call($toggleBoxes, function(elem) {
elem.checked = false;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input checkbox</title>
<style>
body {
margin: 0;
background: beige;
border: 1px solid blue;
}
.main-container {
border: 1px solid red;
width: 25%;
position: relative;
}
.toggle-box {
display: none;
}
label {
margin: 0.2em;
display: block;
text-align: center;
transition: all 1s linear;
border: 1px solid green;
}
.toggle-box + div {
display: none;
margin: 0.2em;
text-align: center;
}
.toggle-box:checked + div {
display: block;
border: 1px solid black;
transition: all 1s linear;
}
button {
display: block;
margin: auto;
width: 100%;
}
</style>
</head>
<body>
<div id="main-container" class="main-container">
<label for="toggle-box">A</label>
<input class="toggle-box" id="toggle-box" type="checkbox">
<div>
<button type="button">submit</button>
<button type="button">submit</button>
</div>
<label for="toggle-box2">B</label>
<input class="toggle-box" id="toggle-box2" type="checkbox">
<div>
<button type="button">submit</button>
<button type="button">submit</button>
</div>
<div></div>
<div></div>
<div class="test1"></div>
</div>
<button type="button" onclick="closeMe()">close</button>
<button type="button" onclick="openMe()">open</button>
<script>
function closeMe() {
var $toggleBoxes = document.getElementsByClassName("toggle-box");
[].forEach.call($toggleBoxes, function(elem) {
elem.checked = false;
});
document.getElementById("main-container").style.display = "none";
}
function openMe() {
document.getElementById("main-container").style.display = "block";
}
</script>
</body>
</html>
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'.
First click works and opens a web page. Second click and no event. Why is the second event not executed: t2.firstChild.nodeValue = "two";1
window.open("http://www.google.com",'content');?
First click should open a web page(1), the second should open another webpage(2). Third time should open first web page(1).
<!doctype html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#sidhuvud {
background: #cc99cc;
padding: 20px;
}
#kolumn1 {
float: left;
width: 250px;
min-height: 550px;
padding: 0 20px 20px 20px;
border-right: 1px solid #000;
}
#kolumn2 {
float: left;
width: 60%;
min-height: 550px;
padding: 0 20px 20px 20px;
border-right: 1px solid #000;
}
#kolumn3 {
float: right;
width: 250px;
min-height: 550px;
padding: 0 20px 20px 20px;
border-right: 1px solid #000;
}
</style>
<meta charset="utf-8">
</head>
<body>
<div id="sidhuvud">
<p> </p>
</div>
<div id="kolumn1">
<p> </p>
</div>
<div id="kolumn2">
<p> </p>
<p><br>
<div id="content"><iframe name="content" width="850" height="500" src="http://www.dreamincode.net/forums/topic/215340-open-href-into-a-div/" style="display: block;
margin-left: auto;
margin-right: auto;"></iframe></div>
</div>
<div id="kolumn3">
<ul>
<table id="outside">
<tr><td id="t1"><li class="button3">Test me</li></td></tr>
<tr><td id="t2">one</td></tr>
</table>
</ul>
<br>
<div id="log"></div>
<script>
//test button
// Function to change the content of t2
function modifyText() {
var t2 = document.getElementById("t2");
if (t2.firstChild.nodeValue == "two") {
t2.firstChild.nodeValue = "one";
window.open("http://www.w3schools.com","content");
} else {
t2.firstChild.nodeValue = "two";1
window.open("http://www.google.com",'content');
}
}
//test button
// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);
</script>
</div>
</body>
</html>