I recently picked up JavaScript and I have trouble moving my input text from one div to another.
I have no issues inputting my name and displaying in box A.
The only issue is moving the text.
I have no issues with CSS and HTML area, however, if you feel that I can improve in the areas below (HTML & CSS) and dish out tips I would greatly appreciate it.
Am I missing out or doing it wrong? Please advice.
Below is my code:
// `name` is a global var for use in functions below this comment. //
var name;
function requestname() {
var name = prompt("Enter your name");
var para = document.createElement("p");
var node = document.createTextNode(name);
para.appendChild(node);
document.getElementById("boxa").appendChild(para);
}
function movetext() {
var name = document.getElementById("nameinput");
var pos = 0;
var moveText = setInterval(move, 50);
}
function move() {
pos++;
e.style.top = pos + "px";
e.style.left = pos + "px";
}
#container {
width: 100%;
overflow: hidden;
}
#boxa {
background-color: black;
width: 20%;
height: 200px;
float: left;
margin: auto;
text-align: center;
vertical-align: middle;
line-height: 150px;
color: white;
}
#button {
background: white;
width: 10%;
height: 200px;
float: left;
margin-left: 15px;
margin-right: 15px;
text-align: center;
vertical-align: middle;
line-height: 150px;
}
#boxb {
background: grey;
width: 20%;
height: 200px;
float: left;
margin-left: 15px;
text-align: center;
vertical-align: middle;
line-height: 150px;
}
<button onClick="requestname()">Start</button>
<button onClick="clear()">Clear</button>
<br />
<!-- There will be 1 main DIV(container) and 3 sub DIV(boxa, button and boxb) -->
<!-- Div button have 2 buttons allowing me to move name from box A to box B -->
<div id="container">
<div id="boxa"></div>
<div id="button">
<button onClick="movetext()">></button>
<br />
<button onClick="movetext2()"><</button>
</div>
<div id="boxb">
<span id="nameinput" style="position:absolute" ;></span>
</div>
</div>
I have no problem here on. I think my main issue lies in script part.
// Var name is a global var for use in functions below this comment. //
var name
var pos=0;
var para;
var node;
var m;
function requestname()
{
name = prompt("Enter your name");
para = document.createElement("p");
para.setAttribute('id','remove');
node = document.createTextNode(name);
para.appendChild(node) ;
document.getElementById("boxa").appendChild(para);
}
function movetext ()
{
para = document.createElement("p");
node = document.createTextNode(name);
para.appendChild(node);
document.getElementById("boxb").appendChild(para);
name = document.getElementById("nameinput");
var element = document.getElementById('remove');
element.parentNode.removeChild(element)
pos = 0;
move(name)
}
function move(name)
{
pos++;
name.style.top = pos + 'px';
name.style.left = pos + 'px';
}
#container {
width: 100%;
overflow: hidden;
}
#boxa {
background-color: black;
width: 20%;
height: 200px;
float: left;
margin: auto;
text-align: center;
vertical-align: middle;
line-height: 150px;
color: white;
}
#button {
background: white;
width: 10%;
height: 200px;
float: left;
margin-left: 15px;
margin-right: 15px;
text-align: center;
vertical-align: middle;
line-height: 150px;
}
#boxb {
background: grey;
width: 20%;
height: 200px;
float: left;
margin-left: 15px;
text-align: center;
vertical-align: middle;
line-height: 150px;
}
<button onClick="requestname()">Start</button> <button onClick="clear()">Clear</button>
<br />
<div id="container">
<div id="boxa">
</div>
<div id="button">
<button onClick="movetext()">></button> <br />
<button onClick="movetext2()"><</button>
</div>
<div id="boxb">
<span id="nameinput" style="position:absolute";></span>
</div>
</div>
Related
Currently making a quick journal entry app in HTML, CSS, and JS. User inputs and submits text data along with the time and date. I'm trying to take that data from the localStorage to put inside an existing div class. Any advice?
This is the HTML code.
<div class="background-journal">
<button class="button-journal" onclick="openPopup()" id="entrybtn">New Entry</button>
<br><br><br><br><br><br><br>
<button class="show-journal" onclick="recallEntries()" id="showbtn">View Previous Entries</button>
<div class="journal-visual" id="data-viz">
</div>
<div id="popup" class="popup">
<form id="form" class="form">
<br>
<label for="journal-entry">何を勉強していますか？</label><br><br>
<textarea class="add-entry" id="journal-entry" rows="6" cols="150"></textarea><br>
<button type="submit" onclick="submitJournalEntry()">Submit</button>
<button type="button" onclick="closePopup()">Close</button>
</form>
</div>
This is the CSS code.
.background-journal{
position:absolute;
top: 35%;
left: 9.6%;
background-color:rgba(255,255,255,0);
z-index:1001;
width: 80%;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
}
.button-journal {
background-color: #fff;
border: none;
color: #000;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 90%;
height: 100px;
left: 4.5%;
position: absolute;
box-shadow: 3px 5px #888888;
}
.show-journal{
background-color: #fff;
border: none;
color: #000;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 90%;
height: 100px;
left: 4.5%;
position: absolute;
box-shadow: 3px 5px #888888;
}
.journal-visual{
background-color: #fff;
z-index:1003;
width: 70%;
height: 450px;
overflow-y: auto;
overflow-x: hidden;
margin-left: auto;
margin-right: auto;
display: none;
position: relative;
color: #000;
text-align: center;
}
.button-popup-journal{
position: relative;
}
.popup {
display: none;
position: absolute;
z-index: 1;
width: 100%;
height: 200px;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
box-shadow: 3px 5px #000;
}
.popup form{
margin: auto;
}
.add-entry{
margin: auto;
overflow: auto;
position:inherit;
left: 5%;
}
.background-journal label{
color: white;
opacity: 70%;
}
and this is the JS code.
// Journal Function
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("entrybtn").style.display = "none";
document.getElementById("showbtn").style.display = "none";
}
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("entrybtn").style.display = "block";
document.getElementById("showbtn").style.display = "block";
}
function submitJournalEntry() {
var journalEntry = document.getElementById("journal-entry").value;
var date = new Date();
var timestamp = date.toString();
localStorage.setItem(timestamp, journalEntry);
closePopup();
}
function recallEntries() {
document.getElementById("entrybtn").style.display = "none";
document.getElementById("showbtn").style.display = "none";
document.getElementById("data-viz").style.display = "block";
var keys = Object.keys(localStorage);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var journalEntry = localStorage.getItem(key);
var viz = document.getElementById('data-viz');
div.innerHTML = '<p><strong>' + key + '</strong>: ' + journalEntry + '</p>';
document.body.appendChild(viz);
}
}
I was expecting the text to show up in the div class="journal-entry" id="data-viz" but nothing is there. Any ideas?
'use strict';
// Select all elements needed for this task (querySelector)
const form = document.querySelector('.form');
const input = document.querySelector('.input__text');
let container = document.querySelector('.notes-container');
const button = document.querySelector('.btn');
const noteDiv = document.querySelector('.note');
let modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnClose = document.querySelectorAll('.close-modal');
const btnView = document.querySelector('.btn-view');
let noteCount = 0;
// Create function that reads when the button is clicked on form
form.addEventListener('submit', function (e) {
e.preventDefault();
// if input filed is empty note will not be added!
if (!input.value == '') {
// Every time i click on button, notCount is incremented by one. Then that count i store and use to count number of note
if (button.click) noteCount++;
// Creating div element where notes will go
const divNotes = document.createElement('div');
// Adding class to that div element
divNotes.classList.add('note');
// Inserting HTML content into created div
const createdNote = (divNotes.innerHTML += `
<h4 class="note__heading">Note ${noteCount}</h4>
<p class="note__text">${input.value}</p>
<button class="btn btn-view">View Detail</button>
`);
container.appendChild(divNotes);
//
container.addEventListener('click', function (e) {
if (!e.target.classList.contains('btn-view')) {
return;
}
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
modal.innerHTML = `<h4 class="note__heading">Note ${noteCount}</h4>
<p class="note__text">${input.value}</p>
<button class="close-modal">X</button>
`;
});
modal.addEventListener('click', function (e) {
if (!e.target.classList.contains('close-modal')) {
return;
}
modal.classList.add('hidden');
overlay.classList.add('hidden');
});
}
});
html {
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
}
.container__app {
text-align: center;
}
h1 {
font-size: 4rem;
font-weight: 100;
}
h3 {
font-size: 2rem;
color: green;
margin-top: -40px;
}
.input__text {
width: 1310px;
height: 50px;
margin-bottom: 15px;
padding: 10px;
font-size: 16px;
resize: none;
}
label {
bottom: 36px;
padding: 3px;
vertical-align: top;
font-size: 25px;
font-weight: 600;
}
.btn-green {
color: white;
background-color: green;
width: 100px;
height: 35px;
border-radius: 5px;
border: none;
}
.btn-span {
margin-top: 15px;
}
.btn-green:active {
transform: translateY(4px);
}
.notes-container {
margin: auto;
padding: 25px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
grid-gap: 1.5rem;
}
.note {
border: 1px solid gray;
padding-bottom: 18px;
margin-top: 15px;
}
.note__text {
overflow: hidden;
max-height: 7rem;
-webkit-box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
word-wrap: break-word;
padding: 0 20px 4px 20px;
}
h4 {
font-size: 25px;
}
p {
font-size: 20px;
}
.btn-view {
color: white;
background-color: rgb(24, 113, 197);
width: 100px;
height: 35px;
border-radius: 5px;
border: none;
}
.btn-view:active {
transform: translateY(4px);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
border-radius: 5px;
background-color: white;
padding: 6rem;
box-shadow: 0 3rem 5rem rgba(0 0 0 0.3);
z-index: 10;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
z-index: 5;
}
.hidden {
display: none;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 2rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Note Taker App</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="container__app">
<h1>Note Taker</h1>
<h3>Add a new note:</h3>
<div class="input__field">
<form class="form">
<label class="input__text-name">Note: </label>
<textarea
rows="5"
cols=""
class="input__text"
placeholder="Write your note here"
></textarea>
<label for="submit"></label><br />
<button class="btn btn-green" type="submit">Add Note</button>
</form>
</div>
<div class="modal hidden">
<button class="close-modal">X</button>
</div>
<div class="overlay hidden"></div>
<div class="notes-container">
<!-- <div class="note">
<h4 class="note__heading">Note1</h4>
<p class="note__text">
MY note text
</p>
<div class="note__btn">
<button class="btn btn-view">View Detail</button>
</div>
</div> -->
</div>
</div>
</body>
</html>
Im new to programming, please help. I finished almost everything except last step. This is the problem: when I press button view more (it should create modal window related to that note and button). Thing is that everything is working fine when you press buttons in order (like note1, note2, note3), but if you press 6th button and then the first one, only last element will be created. If someone can explain me how this works. https://codepen.io/Niksani/pen/GROXGyN
const form = document.querySelector('.form');
const input = document.querySelector('.input__text');
let container = document.querySelector('.notes-container');
const button = document.querySelector('.btn');
const noteDiv = document.querySelector('.note');
let modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnClose = document.querySelectorAll('.close-modal');
const btnView = document.querySelector('.btn-view');
let noteCount = 0;
form.addEventListener('submit', function (e) {
e.preventDefault();
if (!input.value == '') {
and use to count number of note
if (button.click) noteCount++;
const divNotes = document.createElement('div');
divNotes.classList.add('note');
const createdNote = (divNotes.innerHTML += `
<h4 class="note__heading">Note ${noteCount}</h4>
<p class="note__text">${input.value}</p>
<button class="btn btn-view">View Detail</button>
`);
container.appendChild(divNotes);
//
container.addEventListener('click', function (e) {
if (!e.target.classList.contains('btn-view')) {
return;
}
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
modal.innerHTML = `<h4 class="note__heading">Note ${noteCount}</h4>
<p class="note__text">${input.value}</p>
<button class="close-modal">X</button>
`;
});
modal.addEventListener('click', function (e) {
if (!e.target.classList.contains('close-modal')) {
return;
}
modal.classList.add('hidden');
overlay.classList.add('hidden');
});
}
});
'use strict';
// Select all elements needed for this task (querySelector)
const form = document.querySelector('.form');
const input = document.querySelector('.input__text');
let container = document.querySelector('.notes-container');
const button = document.querySelector('.btn');
const noteDiv = document.querySelector('.note');
let modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnClose = document.querySelectorAll('.close-modal');
const btnView = document.querySelector('.btn-view');
let noteCount = 0;
// Create function that reads when the button is clicked on form
form.addEventListener('submit', function (e) {
e.preventDefault();
// if input filed is empty note will not be added!
if (!input.value == '') {
// Every time i click on button, notCount is incremented by one. Then that count i store and use to count number of note
if (button.click) noteCount++;
// Creating div element where notes will go
const divNotes = document.createElement('div');
// Adding class to that div element
divNotes.classList.add('note');
// Inserting HTML content into created div
const createdNote = (divNotes.innerHTML += `
<h4 class="note__heading">Note ${noteCount}</h4>
<p id='note${noteCount}' class="note__text">${input.value}</p>
<button class="btn btn-view" value='${noteCount}'>View Detail</button>
`);
container.appendChild(divNotes);
//
container.addEventListener('click', function (e) {
if (!e.target.classList.contains('btn-view')) {
return;
}
let showNote = '';
showNote = e.target.value;
let noteText = document.getElementById(`note${showNote}`).innerHTML;
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
modal.innerHTML = `<h4 class="note__heading">Note ${showNote}</h4>
<p class="note__text">${noteText}</p>
<button class="close-modal">X</button>
`;
});
modal.addEventListener('click', function (e) {
if (!e.target.classList.contains('close-modal')) {
return;
}
modal.classList.add('hidden');
overlay.classList.add('hidden');
});
}
});
html {
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
}
.container__app {
text-align: center;
}
h1 {
font-size: 4rem;
font-weight: 100;
}
h3 {
font-size: 2rem;
color: green;
margin-top: -40px;
}
.input__text {
width: 1310px;
height: 50px;
margin-bottom: 15px;
padding: 10px;
font-size: 16px;
resize: none;
}
label {
bottom: 36px;
padding: 3px;
vertical-align: top;
font-size: 25px;
font-weight: 600;
}
.btn-green {
color: white;
background-color: green;
width: 100px;
height: 35px;
border-radius: 5px;
border: none;
}
.btn-span {
margin-top: 15px;
}
.btn-green:active {
transform: translateY(4px);
}
.notes-container {
margin: auto;
padding: 25px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
grid-gap: 1.5rem;
}
.note {
border: 1px solid gray;
padding-bottom: 18px;
margin-top: 15px;
}
.note__text {
overflow: hidden;
max-height: 7rem;
-webkit-box-orient: vertical;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
word-wrap: break-word;
padding: 0 20px 4px 20px;
}
h4 {
font-size: 25px;
}
p {
font-size: 20px;
}
.btn-view {
color: white;
background-color: rgb(24, 113, 197);
width: 100px;
height: 35px;
border-radius: 5px;
border: none;
}
.btn-view:active {
transform: translateY(4px);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
border-radius: 5px;
background-color: white;
padding: 6rem;
box-shadow: 0 3rem 5rem rgba(0 0 0 0.3);
z-index: 10;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
z-index: 5;
}
.hidden {
display: none;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 2rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
<div class="container__app">
<h1>Note Taker</h1>
<h3>Add a new note:</h3>
<div class="input__field">
<form class="form">
<label class="input__text-name">Note: </label>
<textarea
rows="5"
cols=""
class="input__text"
placeholder="Write your note here"
></textarea>
<label for="submit"></label><br />
<button class="btn btn-green" type="submit">Add Note</button>
</form>
</div>
<div class="modal hidden">
<button class="close-modal">X</button>
</div>
<div class="overlay hidden"></div>
<div class="notes-container">
<!-- <div class="note">
<h4 class="note__heading">Note1</h4>
<p class="note__text">
MY note text
</p>
<div class="note__btn">
<button class="btn btn-view">View Detail</button>
</div>
</div> -->
</div>
</div>
check out the new event listener for your btn.click event...I am determining which note to show by getting the button value attribute that was added to the string literal....I am using that value to get the text of the note by giving the p an id and referencing that....I believe this gives you what you are looking for
Basically, I'm trying to update the value of the closest input to an element based on some conditions.
This doesn't seem to work at all.
To explain this better, here's a working example:
$('.t').append('<div class="row" style="margin-bottom:10px;"></div><div class="block block-strong myBlock"><div class="imgHolder"><div data-id="ASAS-HHH-UUU-TEY.jpg?42344444444" class="addedImg"><div class="deletImg" data-id="ASAS-HHH-UUU-TEY.jpg?42344444444">X</div><img class="tappableImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png" ></div></div></div><div><input type="text" class="input" value="22,44,66,99,ASAS-HHH-UUU-TEY.jpg?42344444444"/><div><div class="row" style="margin-bottom:10px;"></div><div class="block block-strong myBlock"><div class="imgHolder"><div data-id="ASAS-HHH-UUU-TEY.jpg?423423" class="addedImg"><div class="deletImg" data-id="ASAS-HHH-UUU-TEY.jpg?423423">X</div><img class="tappableImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png" ></div></div></div><div><input type="text" class="input" value="22,44,66,99,ASAS-HHH-UUU-TEY.jpg?423423"/>');
$(document).on('click', '.deletImg', function() {
var $this = (this);
var id = $(this).attr('data-id');
var inp = $($this).parents().parent().eq(1).find(".input").val();
inp = inp.replace(id + ',', '');
inp = inp.replace(id, ''); //$($this).parents().parents().parent().eq(1).find(".input").val(inp);
});
.addedImg {
width: 100px;
height: 100px;
position: relative;
display: inline-block;
margin-right: 12px;
}
.imgHolder {
height: auto;
overflow-y: hidden;
overflow-x: scroll;
min-width: 1000px;
width: auto;
}
.myBlock {
overflow-y: hidden;
overflow-x: scroll;
margin-bottom: 10px;
}
.addedImg img {
width: 100%;
border-radius: 4px;
}
.deletImg {
position: absolute;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
background: black;
color: white;
top: 10px;
right: 10px;
border-radius: 4px;
}
<div class="t">
</div>
If you run the jsfiddle above, and click on the FIRST delete button (black X), it finds the data-id of that element and then it should look into the CLOSEST input for that value/data-id and update that input value only.
But at the moment, when I click on the delete button, it updates all the inputs!
Can someone please advice oaths issue?
First, you have a typo in the HTML that you're appending to .t. The <div> after the <input> should be </div>.
The input is not contained in any parent unique to just the delete button. If you go up to the .myBlock DIV, you need to go to the next DIV after that and find the .input within it.
$('.t').append('<div class="row" style="margin-bottom:10px;"></div><div class="block block-strong myBlock"><div class="imgHolder"><div data-id="ASAS-HHH-UUU-TEY.jpg?42344444444" class="addedImg"><div class="deletImg" data-id="ASAS-HHH-UUU-TEY.jpg?42344444444">X</div><img class="tappableImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png" ></div></div></div><div><input type="text" class="input" value="22,44,66,99,ASAS-HHH-UUU-TEY.jpg?42344444444"/></div><div class="row" style="margin-bottom:10px;"></div><div class="block block-strong myBlock"><div class="imgHolder"><div data-id="ASAS-HHH-UUU-TEY.jpg?423423" class="addedImg"><div class="deletImg" data-id="ASAS-HHH-UUU-TEY.jpg?423423">X</div><img class="tappableImg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/783px-Test-Logo.svg.png" ></div></div></div><div><input type="text" class="input" value="22,44,66,99,ASAS-HHH-UUU-TEY.jpg?423423"/></div>');
$(document).on('click', '.deletImg', function() {
var $this = (this);
var id = $(this).attr('data-id');
var inp = $($this).closest(".myBlock").next().find(".input").val();
inp = inp.replace(id + ',', '');
inp = inp.replace(id, '');
$($this).closest(".myBlock").next().find(".input").val(inp);
});
.addedImg {
width: 100px;
height: 100px;
position: relative;
display: inline-block;
margin-right: 12px;
}
.imgHolder {
height: auto;
overflow-y: hidden;
overflow-x: scroll;
min-width: 1000px;
width: auto;
}
.myBlock {
overflow-y: hidden;
overflow-x: scroll;
margin-bottom: 10px;
}
.addedImg img {
width: 100%;
border-radius: 4px;
}
.deletImg {
position: absolute;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
background: black;
color: white;
top: 10px;
right: 10px;
border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="t">
</div>
What is the best way to fill in the space between these two objects, essentially making one object that fills the space from the most left the a to the most right of b. I need a dynamic solution, since the the position of A and B will vary, sometimes B will be further left than A. I would like them to begin as two separate objects though. Also note only the space between the two do I wish to be filled, nothing outside.
function myFunction() {
var x = document.getElementById('a');
var y = document.getElementById('b');
x.style.right = "70%";
y.style.right = "50%";
var greenRect = x.getBoundingClientRect();
var blueRect = y.getBoundingClientRect();
}
h1 {
position: relative;
width: auto;
height: 50px;
background-color: beige;
}
h2 {
position: relative;
}
#a {
position: relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
margin-left: -50px;
transform-origin: left;
border-radius: 50%;
}
#b {
position: relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
border-radius: 50%;
}
<h1>
<div id='a'></div>
<div id='b'></div>
</h1>
<h2>
<button onclick='myFunction()'>PRESS</button>
</h2>
function myFunction() {
var x = document.getElementById('a');
var y = document.getElementById('b');
x.style.right = "70%";
y.style.right = "50%";
var greenRect = x.getBoundingClientRect();
var blueRect = y.getBoundingClientRect();
y.style.width = (blueRect.left - greenRect.left) + "px";
}
h1 {
position: relative;
width: auto;
height: 50px;
background-color: beige;
}
h2 {
position: relative;
}
#a {
position:relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
margin-left: -50px;
transform-origin: left;
}
#b {
position:relative;
min-width: 50px;
height: 50px;
background-color: green;
float: right;
}
<h1>
<div id = 'a'></div>
<div id = 'b'></div>
</h1>
<h2>
<button onclick = 'myFunction()'>PRESS</button>
</h2>
You can use some background and box-shadow trick to visually fill the space between:
var x = document.getElementById('a');
var y = document.getElementById('b');
function myFunction() {
var r = Math.random()*100;
y.style.right=r+"%";
x.style.right=(Math.random()*(100 - r) + r)+"%";
}
h1 {
overflow:auto;
background-color: blue;
color:#fff;
text-align:center;
}
#a {
position: relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
margin-left: -50px;
transform-origin: left;
border-radius: 50%;
box-shadow:-50vw 0 0 50vw beige;
}
#b {
position: relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
border-radius: 50%;
box-shadow:50vw 0 0 50vw beige;
}
<h1>
<div id='a'>1</div>
<div id='b'>2</div>
</h1>
<h2>
<button onclick='myFunction()'>PRESS</button>
</h2>
I just finished my javascript course in somewhere in online, and tried to make my own small project 'todolist'.
when user put work into and click , list should be added, but it shows a white and clear page.. I really can't see what's the problem in here.
I tested using console.log() but It shows me what I want, but it doesn't works in tag.
Here is my Code :
input[type=text] {
width: 500px;
height: 40px;
float: left;
}
#input_table {
display: block;
margin-left: auto;
margin-right: auto;
}
#input_box {
text-align: center;
padding-bottom: 50px;
background-color: crimson;
}
.align_center {
display: inline-block;
text-align: center;
}
.submit_box {
padding: 10px;
width: 50px;
height: 25px;
background: #d9d9d9;
color: #555;
float: left;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
text-align: center;
}
body {
background-color: gold;
}
.input_text {
float: left;
}
.store_ul {
margin: 0;
padding: 0;
text-align: right;
}
.oneLine {
font-size: 30px;
width: 100%;
height: 50px;
background-color: blue;
}
.close_box {
padding: 5px;
width: 50px;
height: 25px;
color: #555;
cursor: pointer;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>ToDoList</title>
</head>
<body>
<script>
var count = 50;
var i = 0;
var tag = '';
</script>
<div id="input_table">
<div id="input_box">
<h1 style="color:white">My To Do List</h1>
<div class="align_center">
<input class="text_box" type="text" value="Title...">
<span class="submit_box" onclick="write()">Add</span>
</div>
</div>
</div>
<div class="output_table">
<div class="store_box">
<ul class="store_ul">
</ul>
</div>
</div>
<script>
function write() {
var text = document.querySelector('.text_box').value;
console.log(text);
if (i < 50) {
tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>';
document.querySelector('.store_ul').innerHTML = tag;
console.log(tag);
i++;
} else {
alert("lists can't be added more than 50 works");
}
}
</script>
</body>
write will refer to the global function document.write, which will completely replace the page if the page has already been loaded. Use a different function name, perhaps "addTodo":
It would also probably be better to use a placeholder rather than a hard-coded value of Title... in the input box:
var count = 50;
var i = 0;
var tag = '';
function addTodo() {
var text = document.querySelector('.text_box').value;
console.log(text);
if (i < 50) {
tag += '<div class="oneLine"><li class="input_text">' + text + '</li><span class="close_box">x</span></div>';
document.querySelector('.store_ul').innerHTML = tag;
console.log(tag);
i++;
} else {
alert("lists can't be added more than 50 works");
}
}
input[type=text] {
width: 500px;
height: 40px;
float: left;
}
#input_table {
display: block;
margin-left: auto;
margin-right: auto;
}
#input_box {
text-align: center;
padding-bottom: 50px;
background-color: crimson;
}
.align_center {
display: inline-block;
text-align: center;
}
.submit_box {
padding: 10px;
width: 50px;
height: 25px;
background: #d9d9d9;
color: #555;
float: left;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
text-align: center;
}
body {
background-color: gold;
}
.input_text {
float: left;
}
.store_ul {
margin: 0;
padding: 0;
text-align: right;
}
.oneLine {
font-size: 30px;
width: 100%;
height: 50px;
background-color: blue;
}
.close_box {
padding: 5px;
width: 50px;
height: 25px;
color: #555;
cursor: pointer;
}
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<title>ToDoList</title>
</head>
<body>
<script>
</script>
<div id="input_table">
<div id="input_box">
<h1 style="color:white">My To Do List</h1>
<div class="align_center">
<input class="text_box" type="text" placeholder="Title...">
<span class="submit_box" onclick="addTodo()">Add</span>
</div>
</div>
</div>
<div class="output_table">
<div class="store_box">
<ul class="store_ul">
</ul>
</div>
</div>
<script>
</script>
</body>
You have a name conflict and the native method overrides yours in the global scope. In the example below you can see it is document.write.
<button onclick="console.log(write)">console</button>
<button onclick="console.log(write('hi'))">Hi</button>