I'm working on a form validation for a uni project and I can't seem to get it right.
I'm using if statements inside a function and I get no reaction from the first-name input.
I also tried to change the 'href'-link of the form element and no reaction, thank you in advance!
JsFiddle : https://jsfiddle.net/gcdb2nj3/2/
var form = document.querySelector('form');
var firstName = document.getElementById('first-name');
var lastName = document.getElementById('last-name');
var eMail = document.getElementById('e-mail');
var phoneNumber = document.getElementById('phone-number');
var textArea = document.getElementById('custom-text-area');
var warning = document.querySelector('.warning');
// Prevent-Default Funktion
function preventtDefault(e) {
e.preventDefault();
};
formularValidierung();
function formularValidierung() {
form.addEventListener('submit', function(e) {
if(firstName.value === "") {
warning.style.display="block"
firstName.classList.add('input-invalid')
e.preventDefault();
} else {
warning.style.display="none"
e.preventDefault();
}
});
};
You have to pass the event object to your preventDefault function to prevent the default action. Note that the code you provided should work fine as you are calling event.preventDefault if the form validation does not pass whereas in your JSFiddle you are calling the preventDefault function without any arguments.
// Burger Menu Section
var mySideNav = document.getElementById('mySidenav');
var burgerLines = document.querySelector('.burger-lines');
var closeBtn = document.querySelector('.closebtn');
var logo = document.querySelector('.logo');
var what = $('.what');
$(burgerLines).on('click', function openNav() {
mySideNav.style.width="100%";
mySideNav.style.opacity="1";
burgerLines.style.opacity="0"
closeBtn.style.color="white"
closeBtn.style.fontSize="66px"
closeBtn.style.top="-29px"
});
$(closeBtn).on('click', function closeNav() {
mySideNav.style.width="0";
mySideNav.style.opacity = ".00775";
burgerLines.style.opacity="1"
});
// Form validation begins here
var form = document.querySelector('form');
var firstName = document.getElementById('first-name');
var lastName = document.getElementById('last-name');
var eMail = document.getElementById('e-mail');
var phoneNumber = document.getElementById('phone-number');
var textArea = document.getElementById('custom-text-area');
var warning = document.querySelector('.warning');
// Prevent-Default Funktion
function preventDefault(e) {
e.preventDefault();
};
formularValidierung();
function formularValidierung() {
form.addEventListener('submit', function(e) {
if(firstName.value === "") {
warning.style.display="block"
firstName.classList.add('input-invalid')
preventDefault(e);
} else {
warning.style.display="none"
preventDefault(e);
}
});
};
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #FCFCFC;
}
.sidenav {
font-family: 'Cormorant Garamond';
font-weight: bold;
width: 0px;
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
overflow-x: hidden;
padding-top: 65px;
margin-left: 0px;
text-align: center;
transition: .7s;
}
.sidenav a {
padding: 45px 8px 20px 32px;
text-decoration: none;
font-size: 28px;
color: white;
display: block;
transition: 0.7s;
}
.sidenav a:hover {
color: rgb(155, 155, 155);
}
.burger-lines {
font-size:30px;
cursor:pointer;
position: fixed;
top: 44px;
right: 70px;
}
.logo {
font-family: 'Oswald', sans-serif;
padding: 40px 0px 0px 40px;
text-decoration: none;
font-size: 26px;
color: black;
display: block;
position: fixed;
z-index: 1;
top: 5px;
}
.sidenav .closebtn {
color: black;
cursor:pointer;
position: absolute;
top: -5px;
right: 60px;
font-size: 46px;
}
.headline-2 {
text-transform: uppercase;
text-align: center;
position: relative;
top: 9.5rem;
right: 15rem;
font-size: 18px;
}
.form-wrap {
text-align: center;
margin-top: 10rem;
}
.form-wrap > input {
font-family: 'Cormorant Garamond';
margin-top: 20px;
padding: 5px;
font-size: 16px;
border: 1px solid lightgray;
background: #FCFCFC;
}
#first-name, #last-name, #e-mail, #phone-number {
width: 350px;
height: 40px;
}
#custom-text-area {
font-family: 'Cormorant Garamond';
padding: 10px;
margin-top: 1rem;
width: 707px;
height: 230px;
font-size: 16px;
background: #FCFCFC;
border: 1px solid lightgray;
}
#submit {
background: black;
border: 1px solid black;
font-size: 19px;
text-align: left;
color: white;
width: 120px;
height: 45px;
margin-right: 29.3rem;
margin-top: 25px;
}
#submit:hover {
background: rgb(53, 53, 53);
transition: .5s;
}
/*input:hover, #custom-text-area:hover {
border: 1px solid red;
color: red;
transition: .5s ease-in;
}*/
.input-invalid {
border: 1px solid red;
color: red;
transition: .5s ease-in;
}
.warning {
font-family: 'Cormorant Garamond';
color: red;
position: relative;
top: -36px;
left: -3rem;
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Styx Somnus || Contact</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<header>
<nav>
<a class="logo" href="index.html">STYX SOMNUS</a>
<div class="sidenav" id="mySidenav">
<a href="javascript:void(0)" class="closebtn" >×</a>
Home
About
Projects
Contact
</div>
<span class="burger-lines">☰</span>
</nav>
</header>
<main>
<p class="headline-2">Contact Form</p>
<form action="#" class="form-wrap">
<input type="text" id="first-name" placeholder="First Name*">
<input type="text" id="last-name" placeholder="Last Name*"><br>
<input type="email" id="e-mail" placeholder="Your E-Mail*">
<input type="text" id="phone-number" placeholder="Phone Number"><br>
<textarea id="custom-text-area" cols="40" rows="7" placeholder="Your Message..."></textarea><br>
<input type="submit" id="submit" value="Submit →">
<p class="warning">All fields with * must be filled in.</p>
</form>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should call preventDefault immediately upon submission, run your validation, then if validation passes, continue on with submission: https://jsfiddle.net/gcdb2nj3/4/
function formularValidierung() {
form.addEventListener('submit', function(e) {
e.preventDefault();
if (firstName.value === "") {
warning.style.display = "block"
firstName.classList.add('input-invalid')
} else {
warning.style.display = "none"
// submit form here
}
});
};
formularValidierung();
Related
I cant believe that i was unable to implement this using all the resources that I know about and I'm stuck on implementing this small feature since last 5-6 hours but it is what it is. I need help to store a single variable on user's localStorage that initially has value 1. If user clicks on a button, then the localStorage value updates to 0. If he clicks again, it again becomes 1. This value is used to switch between light mode and dark mode of the website. Initially I have set the css variable as 1 (for dark mode) and I want to update it using only plain javascript (no libraries) whenever user clicks on the button. The code for the button is in the 2nd try's code. Or it can also be found at my last stackoverflow post regarding the same project.
Here are a few codes of me trying to implement it:
Code implemented and working perfectly without localstorage and with initial variable value as 0:
<!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>Document</title>
<style>
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: 20px;
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: -27px;
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text{
color: black !important;
font-weight: 700;
}
.btn-heading{
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
body{
float: left;
}
</style>
</head>
<body>
<div class="btn-heading">Change Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" >off</span>
</div>
</div>
</div>
<script>
document.getElementById("btn").addEventListener("click", myfunc);
function myfunc() {
let root = document.documentElement;
let elem = getComputedStyle(root).getPropertyValue("--numvar");
console.log(elem);
if (elem == 0 ) {
elem = 1;
}
else if (elem == 1 ) {
elem = 0;
}
// alert(elem);
console.log(elem);
root.style.setProperty("--numvar", elem);
}
</script>
</body>
</html>
Before this:
<!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>Document</title>
<style>
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: 20px;
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: -27px;
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text{
color: black !important;
font-weight: 700;
}
.btn-heading{
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
body{
float: left;
}
</style>
</head>
<body>
<div class="btn-heading">Change Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" >off</span>
</div>
</div>
</div>
<script>
document.getElementById("btn").addEventListener("click", myfunc);
let avar = true; //assume it exists
if (localStorage.hardtoimplement) {
avar = true;
}
else {
localStorage.setItem("hardtoimplement", "on")
}
console.log(localStorage.getItem("hardtoimplement"));
var num = 1;
function myfunc() {
let root = document.documentElement;
let elem = getComputedStyle(root).getPropertyValue("--numvar");
if (typeof (Storage) !== "undefined") {
// console.log(num);
if (localStorage.getItem("hardtoimplement") == "on") {
num = 1;
}
else if (localStorage.getItem("hardtoimplement") == "off") {
num = 0;
}
console.log(num);
}
else {
alert("Sorry, your browser does not support web storage");
}
// console.log(num);
console.log(localStorage.getItem("hardtoimplement"));
if (localStorage.getItem("hardtoimplement") == "on") {
localStorage.hardtoimplement = "off";
}
else if (localStorage.getItem("hardtoimplement") == "off") {
localStorage.hardtoimplement = "on";
}
console.log(elem);
if (num == 0 ) {
num = 1;
}
else if (num == 1 ) {
num = 0;
}
// alert(num);
console.log(num);
root.style.setProperty("--numvar", num);
}
</script>
</body>
</html>
The first try:
<!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>Document</title>
<script>
let avar = true; //assume it exists
if (localStorage.thisisvar) {
avar = true;
}
else {
localStorage.setItem("thisisvar", "on")
}
console.log(localStorage.getItem("thisisvar"));
var num = 0;
function myfunc() {
if (typeof (Storage) !== "undefined") {
// console.log(num);
if (localStorage.getItem("thisisvar") == "on") {
num = 1;
}
else if (localStorage.getItem("thisisvar") == "off") {
num = 0;
}
console.log(num);
}
else {
alert("Sorry, your browser does not support web storage");
}
// console.log(num);
console.log(localStorage.getItem("thisisvar"));
if (localStorage.getItem("thisisvar") == "on") {
localStorage.thisisvar = "off";
}
else if (localStorage.getItem("thisisvar") == "off") {
localStorage.thisisvar = "on";
}
}
function func2(){
alert(num); //initial value is 0 here
}
</script>
</head>
<body>
<button id="result" onclick=" myfunc()">hi</button>
<button onclick="func2()">b2</button>
</body>
</html>
I tried looking for this feature at many places like google, codepen, stackoverflow, etc. and I did find many implementations of this feature but I am unable to integrate any of them to my project on my own.
The requirement can be basically defined as:
A CSS variable is initially set to 1 and it should change on button click to 0.
And if user refreshes the page, it should still be 0.
Thanks.
EDIT:
Integation of answer with project:
<!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>Document</title>
<style>
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
body {
background: #fff;
}
.outer-button {
display: inline-block;
height: 28px;
width: 28px;
position: relative;
margin: 0 3px;
}
.inner-button {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0px 0px 1px 2px white;
border-radius: 20px;
background: #f5f5f5;
}
span {
display: inline-block;
vertical-align: middle;
}
.status-text {
color: white;
text-transform: uppercase;
font-size: 11px;
font-family: Futura, sans-serif;
transition: all 0.2s ease;
}
.sliding-switch {
height: 28px;
width: 72px;
position: relative;
}
.outer-switch-box {
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
border-radius: 20px;
position: relative;
box-shadow: inset 0 1px 3px 0px #818181, 0px 1px 2px 1px white;
transition: all 0.3s ease;
transition-delay: 65ms;
position: absolute;
z-index: 1;
}
.inner-switch-box {
position: relative;
width: 175px;
transition: all 0.3s ease;
}
/* .switch-checkbox:checked+.outer-switch-box .unchecked-text {
color: transparent;
}
.switch-checkbox:not(:checked)+.outer-switch-box .checked-text {
color: transparent;
} */
.switch-checkbox:checked+.outer-switch-box .inner-switch-box {
left: 20px;
}
.switch-checkbox:not(:checked)+.outer-switch-box .inner-switch-box {
left: -27px;
}
.switch-checkbox:checked+.outer-switch-box {
/* background-image: linear-gradient(#b6d284, #b6d284); */
background: #492d7b;
/* background: #b6d284; */
}
.switch-checkbox:not(:checked)+.outer-switch-box {
/* background-image: linear-gradient(#cbcbcb, #dbdbdb); */
background: #dbdbdb;
}
[type="checkbox"] {
margin: 0;
padding: 0;
appearance: none;
width: 100%;
height: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
z-index: 100;
opacity: 0;
}
.unchecked-text{
color: black !important;
font-weight: 700;
}
.btn-heading{
color: black;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
padding: .4vw 0;
}
body{
float: left;
}
</style>
</head>
<body>
<div class="btn-heading">Change Mode</div>
<div class="sliding-switch">
<input type="checkbox" id="btn" class="switch-checkbox" onclick="change()" />
<div class="outer-switch-box">
<div class="inner-switch-box">
<span class="status-text checked-text">on</span>
<span class="outer-button">
<span class="inner-button"></span>
</span>
<span class="status-text unchecked-text" >off</span>
</div>
</div>
</div>
<script>
if (!localStorage.getItem('thisvarisgud4me')) {
localStorage.setItem("thisvarisgud4me", "1")
}
function change() {
if (localStorage.getItem('thisvarisgud4me') == '1') {
localStorage.setItem("thisvarisgud4me", '0')
} else {
localStorage.setItem("thisvarisgud4me", '1')
}
var num = Number(localStorage.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
}
var num = Number(localStorage.getItem('thisvarisgud4me'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
</script>
</body>
</html>
Here is the correct version:
I think you should learn a bit more js as there were a lot of syntax errors.
Here are some resources:
JavaScript Reference
Learn JS at freecodecamp.org
Learn JS at Codecademy
<!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>Document</title>
<style>
:root {
--numvar: 0;
}
html {
filter: invert(var(--numvar));
}
</style>
</head>
<body>
<button id="res" onclick="change()">hi</button>
<script>
if (!localStorage.getItem('thisvarisgood')) {
localStorage.setItem("thisvarisgood", "1")
}
function change() {
if (localStorage.getItem('thisvarisgood') == '1') {
localStorage.setItem("thisvarisgood", '0')
} else {
localStorage.setItem("thisvarisgood", '1')
}
var num = Number(localStorage.getItem('thisvarisgood'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
}
var num = Number(localStorage.getItem('thisvarisgood'));
let root = document.documentElement;
root.style.setProperty("--numvar", num);
</script>
</body>
</html>
The biggest problem with the most recent attempt is you set the variable with the name "thisvarisgood" and access it with "thisvarisgud".
Once you correct that, you need to correct the way that modifies the css. Doing it in the script itself won't work, because the script only runs once. You'll need to set the style it in the function that is called to change the local storage value, and on page load.
edit: the other answer solved it for you, as you can see. He corrected the localStorage variable name and set the style in the function as well (lines 35-37). The "on page load" styling is lines 40-41.
I am working on an IFrame browser with an omnibox (id="address") and a "GO" button (id="submit"), and I would like to detect when the user presses enter and execute a JavaScript function. I have tried using the <form> tag and the W3Schools How TO - Trigger Button Click on Enter, but the form broke my application, and the button click on enter didn't do anything.
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="https://docs.google.com/drawings/d/e/2PACX-1vSqg7iNwpB8zKiJqvtbSf0-YrM_hiRkPs_aHG0RLVvXX1YnHfRfpnqSbN6DwEqpdaOWN1wZttTA3MI3/pub?w=30&h=30" type="image/x-icon" name="favicon"/>
<title>Lokean Web Browser</title>
<style type="text/css" media="all">
#import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700&display=swap');
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 25px; padding:13px; padding-right: 0px; font-family: 'Noto Sans'; sans-serif; background-color:#202124; color:white; position:fixed; z-index: 4;}
.second-row {position: absolute; top: 46px; left: 0; right: 0; bottom: 0;}
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
.form {
float: right;
}
#logo {
}
body {
background-color: #202124;
color: white;
font-family: Noto Sans;
}
}
.noSelect {
}
#address {
border-radius: 11px;
border-style: none;
border-width: 1px;
width: 300px;
padding: 3px;
color: black;
background-color: white;
font-size: 11px;
}
#address:focus {
border-style: solid;
border-color: white;
outline: none;
}
#submit {
border-radius: 11px;
border-color: #FFC107;
border-style: solid;
border-width: 1px;
padding: 3px;
background-color: #FFC107;
color: black;
font-size: 11px;
margin-left: 6px;
margin-right: 13px;
}
input[type=submit] {
width: 2em; height: 2em;
}
#submit:hover {
cursor: pointer;
animation-name: fill-hover;
animation-duration: 0.4s;
animation-fill-mode: forwards;
}
#submit:focus {
outline: none;
}
#submit:active {
animation-name: border-active;
animation-duration: 0.25s;
animation-fill-mode: forwards;
}
#keyframes border-active {
from {}
to {border-color: #9A7E24; border-width: 3px; margin-left: 4px; margin-right: 11px;}
}
#keyframes fill-hover {
from {}
to {border-color: #E0A800; background-color: #E0A800;}
}
a {
color: white;
}
#url {
}
.title {
float: left;
font-size: 19px;
color: white;
}
.center {
text-align: center;
}
</style>
<script type="text/javascript" charset="utf-8">
var url;
function view() {
url = document.getElementById("address").value;
var checkColon = url.includes(":");
var youtube = url.includes("youtube.com/");
var youtubeShort = url.includes("youtu.be/");
var noSearch = url.includes(".") || url.includes(":");;
var newUrl;
var n;
var s;
if (noSearch !== true){
url = "https://en.wikipedia.org/w/index.php?search=" + url + "&title=Special%3ASearch";
}
if (checkColon !== true && noSearch == true){
url = "http://" + url;
}
if (youtube == true) {
n = url.indexOf('&');
if (n !== -1) {
url = url.substring(0, n);
}
newUrl = url.replace("/watch?v=", "/embed/");
url = newUrl;
}
if (youtubeShort == true) {
newUrl = url.replace("youtu.be/", "youtube.com/embed/");
url = newUrl;
}
document.getElementById("url").src = url;
document.getElementById("address").value = url;
return false;
}
function iLoad() {
url = document.getElementById("url").src;
document.getElementById("address").value = url;
}
</script>
</head>
<body>
<div class="first-row">
<span class="title" id="title">
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQ6gkadBIbBAYR28QDvj8FQRnJ51SL9qIFYJQMPtkMiiyRb9ezklHjM5qTY3jCblh6wCw6hTkDJWLQl/pub?w=72&h=72" id="logo">
</span>
<span class="form">
<input onClick="this.setSelectionRange(0, this.value.length)" type="url" name="address bar" id="address" class="noSelect" value="" placeholder="Enter URL or search"/>
<input type="submit" value="+" id="submit" onclick="view();">
</span>
</div>
<div class="second-row">
<iframe id="url" title="Lokean Web" src="https://wikipedia.org" onLoad="iLoad();" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowpaymentrequest="true" allowfullscreen sandbox = "allow-forms allow-pointer-lock allow-same-origin allow-scripts allow-top-navigation" ></iframe>
<div class="center">
<br>
Lokean Web Browser unblocks Youtube and all GoGuardian-blocked websites, and uses Wikipedia for search purposes.
<br>
However, some websites refuse to connect because this is an iFrame browser.
</div>
</div>
</body>
</html>
Thank you for your time and any help! :)
you can do something like:
const inputEl = document.getElementById("enter-input");
inputEl.addEventListener("keyup", manageEnter);
function manageEnter(evt) {
evt.preventDefault();
if (evt.keyCode === 13) {
console.log("hello");
}
}
<form onsubmit="event.preventDefault();" action="">
<input id="enter-input" type="string" />
</form>
To test, do click in the input and press enter to see a console.log, if you press any other key, the console.log doesn't will be trigger.
When I create an div I want to position my button to the right of the text. It works fine when i just put in some text like "PHP" but when write in a longer word like "Javascript" the button moves down so it is under the text. I have tried using float and display but it does not seem to work. Any ideas on how I can do this?
$(document).ready(() => {
//You can use IDs here because these elements are unique
const $addBtn = $("#läggatill");
const $inputBox = $("#myText");
const $flexBox = $("#flexbox");
$addBtn.click(() => {
//Creating a new box that contains everything we need and saving it to a variable
//I'm using ES6 template strings to embed the value of $inputBox
const $box = $(`
<div class="box">
<div class="newrect">
${$inputBox.val()}
<button class="hej">X</button></div>
<div class="dropdown">
<p class="text" id="text">Add description</p>
<textarea maxlength="255" class="autoExpand"></textarea>
</div>
</div>
`);
//Adding event listeneres for the box elements
$box.find(".hej").click(function () {
//Removing the parent .box wrapper DIV
$(this).closest(".box").remove();
});
$box.find(".newrect").click(() => {
const $dropdown = $box.find(".dropdown");
//If the dropdown is invisible, show it. Otherwise, hide it
if ($dropdown.css("display") === "none") {
$box.find(".dropdown").show();
} else {
$box.find(".dropdown").hide();
}
});
//Appending the box to the flexBox
$box.appendTo($flexBox);
});
});
// Expands all textareas with the class autoExpand
$(document)
.one('focus.autoExpand', 'textarea.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.autoExpand', 'textarea.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0, rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
/* Start of lägga till kompetens */
.newrect {
min-width: 105px;
max-width: 220px;
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 0%;
padding: 5px 10px 5px 10px;
border: 1px solid green;
border-radius: 40px;
text-align: center;
background-color: white;
z-index: 2;
cursor: pointer;
}
.flexbox{
display: flex;
flex-direction: row;
}
.box {
z-index: 1;
}
.skriv {
border-radius: 40px 40px 40px 40px;
outline: none;
padding: 0 2%;
width: 51%;
margin: 2%;
}
.läggatill {
border: 1px solid black;
background-color: white;
border-radius: 5px 5px 5px 5px;
outline: none;
margin: 2% 5%;
width: 23%;
max-width: 200px;
float: right;
}
.dropdown {
display: none;
background-color: darkgrey;
height: 400px;
margin-top: -20%;
margin-right: 0%;
margin-left: 1.5%;
margin-bottom: 0%;
z-index: -1;
padding-top: 10%;
width: 97%;
}
.dropdown textarea{
width: 90%;
}
.show {
display: block;
}
.hej {
position: relative;
border: none;
background-color: transparent;
color: darkblue;
}
.autoExpand {
margin-top: 0%;
margin-right: 0%;
margin-left: 5%;
margin-bottom: 0%;
z-index: 2;
display: block;
overflow: hidden;
padding: 10px;
font-size: 14px;
border-radius: 6px;
border: 0;
resize: none;
}
.text {
text-align: center;
margin-top: 30%;
cursor: default;
}
/* End of lägga till kompetens */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/test.css"> <!-- Länk till CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Start of lägga till kompetenser function -->
<div class="col-md-12">
<div class="reform">
<input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus> <!-- Textfield for kompetenser -->
<input id="läggatill" class="läggatill" type="button" value="Add box"> <!-- Button lägga till -->
</div>
</div>
<div class="flexbox" id="flexbox"></div> <!-- Container for the boxes -->
The issue is due to the max-width you set in CSS on .newrect causing the content to overflow. Similarly, the margin-left and margin-right encroached in to the content so .hej occasionally overflowed due to that too.
To fix this, remove max-width from .newrect (or make it much bigger) and use padding to set the horizontal gutters for the content within the .newrect instead:
.newrect {
min-width: 105px;
padding; 0 5px 0 15px;
/* other rules ... */
}
$(document).ready(() => {
//You can use IDs here because these elements are unique
const $addBtn = $("#läggatill");
const $inputBox = $("#myText");
const $flexBox = $("#flexbox");
$addBtn.click(() => {
//Creating a new box that contains everything we need and saving it to a variable
//I'm using ES6 template strings to embed the value of $inputBox
const $box = $(`
<div class="box">
<div class="newrect">
${$inputBox.val()}
<button class="hej">X</button></div>
<div class="dropdown">
<p class="text" id="text">Add description</p>
<textarea maxlength="255" class="autoExpand"></textarea>
</div>
</div>
`);
//Adding event listeneres for the box elements
$box.find(".hej").click(function() {
//Removing the parent .box wrapper DIV
$(this).closest(".box").remove();
});
$box.find(".newrect").click(() => {
const $dropdown = $box.find(".dropdown");
//If the dropdown is invisible, show it. Otherwise, hide it
if ($dropdown.css("display") === "none") {
$box.find(".dropdown").show();
} else {
$box.find(".dropdown").hide();
}
});
//Appending the box to the flexBox
$box.appendTo($flexBox);
});
});
// Expands all textareas with the class autoExpand
$(document)
.one('focus.autoExpand', 'textarea.autoExpand', function() {
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.autoExpand', 'textarea.autoExpand', function() {
var minRows = this.getAttribute('data-min-rows') | 0,
rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
/* Start of lägga till kompetens */
.newrect {
min-width: 105px;
margin-top: 1%;
padding; 0 5px 0 15px;
margin-bottom: 0%;
padding: 5px 10px 5px 10px;
border: 1px solid green;
border-radius: 40px;
text-align: center;
background-color: white;
z-index: 2;
cursor: pointer;
}
.flexbox {
display: flex;
flex-direction: row;
}
.box {
z-index: 1;
}
.skriv {
border-radius: 40px 40px 40px 40px;
outline: none;
padding: 0 2%;
width: 51%;
margin: 2%;
}
.läggatill {
border: 1px solid black;
background-color: white;
border-radius: 5px 5px 5px 5px;
outline: none;
margin: 2% 5%;
width: 23%;
max-width: 200px;
float: right;
}
.dropdown {
display: none;
background-color: darkgrey;
height: 400px;
margin-top: -20%;
margin-right: 0%;
margin-left: 1.5%;
margin-bottom: 0%;
z-index: -1;
padding-top: 10%;
width: 97%;
}
.dropdown textarea {
width: 90%;
}
.show {
display: block;
}
.hej {
position: relative;
border: none;
background-color: transparent;
color: darkblue;
}
.autoExpand {
margin-top: 0%;
margin-right: 0%;
margin-left: 5%;
margin-bottom: 0%;
z-index: 2;
display: block;
overflow: hidden;
padding: 10px;
font-size: 14px;
border-radius: 6px;
border: 0;
resize: none;
}
.text {
text-align: center;
margin-top: 30%;
cursor: default;
}
/* End of lägga till kompetens */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/test.css">
<!-- Länk till CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Start of lägga till kompetenser function -->
<div class="col-md-12">
<div class="reform">
<input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus>
<!-- Textfield for kompetenser -->
<input id="läggatill" class="läggatill" type="button" value="Add box">
<!-- Button lägga till -->
</div>
</div>
<div class="flexbox" id="flexbox"></div>
<!-- Container for the boxes -->
I think it's gonna work for you
$(document).ready(() => {
//You can use IDs here because these elements are unique
const $addBtn = $("#läggatill");
const $inputBox = $("#myText");
const $flexBox = $("#flexbox");
$addBtn.click(() => {
//Creating a new box that contains everything we need and saving it to a variable
//I'm using ES6 template strings to embed the value of $inputBox
const $box = $(`
<div class="box">
<div class="newrect">
<span class="inputText">${$inputBox.val()}</span>
<button class="hej">X</button></div>
<div class="dropdown">
<p class="text" id="text">Add description</p>
<textarea maxlength="255" class="autoExpand"></textarea>
</div>
</div>
`);
//Adding event listeneres for the box elements
$box.find(".hej").click(function () {
//Removing the parent .box wrapper DIV
$(this).closest(".box").remove();
});
$box.find(".newrect").click(() => {
const $dropdown = $box.find(".dropdown");
//If the dropdown is invisible, show it. Otherwise, hide it
if ($dropdown.css("display") === "none") {
$box.find(".dropdown").show();
} else {
$box.find(".dropdown").hide();
}
});
//Appending the box to the flexBox
$box.appendTo($flexBox);
$inputBox.val('');
});
});
// Expands all textareas with the class autoExpand
$(document)
.one('focus.autoExpand', 'textarea.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.autoExpand', 'textarea.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0, rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
.newrect {
/* min-width: 105px; */
/* max-width: 220px; */
margin-top: 1%;
margin-right: 1%;
margin-left: 1%;
margin-bottom: 0%;
padding: 5px 10px 5px 10px;
border: 1px solid green;
border-radius: 40px;
text-align: center;
background-color: white;
z-index: 2;
cursor: pointer;
display: inline-block;
text-overflow:ellipsis;
white-space:nowrap;
line-height: 100%;
}
.flexbox{
display: flex;
flex-direction: row;
}
.box {
z-index: 1;
}
.skriv {
border-radius: 40px 40px 40px 40px;
outline: none;
padding: 0 2%;
width: 51%;
margin: 2%;
}
.läggatill {
border: 1px solid black;
background-color: white;
border-radius: 5px 5px 5px 5px;
outline: none;
margin: 2% 5%;
width: 23%;
max-width: 200px;
float: right;
}
.dropdown {
display: none;
background-color: darkgrey;
height: 400px;
margin-top: -20%;
margin-right: 0%;
margin-left: 1.5%;
margin-bottom: 0%;
z-index: -1;
padding-top: 10%;
width: 97%;
}
.dropdown textarea{
width: 90%;
}
.show {
display: block;
}
.hej {
position: relative;
border: none;
background-color: transparent;
color: darkblue;
}
.autoExpand {
margin-top: 0%;
margin-right: 0%;
margin-left: 5%;
margin-bottom: 0%;
z-index: 2;
display: block;
overflow: hidden;
padding: 10px;
font-size: 14px;
border-radius: 6px;
border: 0;
resize: none;
}
.text {
text-align: center;
margin-top: 30%;
cursor: default;
}
/* End of lägga till kompetens */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/test.css"> <!-- Länk till CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Start of lägga till kompetenser function -->
<div class="col-md-12">
<div class="reform">
<input id="myText" maxlength="25" type="text" class="skriv" name="Kompetenser" autocomplete="off" autofocus> <!-- Textfield for kompetenser -->
<input id="läggatill" class="läggatill" type="button" value="Add box"> <!-- Button lägga till -->
</div>
</div>
<div class="flexbox" id="flexbox"></div> <!-- Container for the boxes -->
</body>
</html>
I want to make input tag(currently height=0) popup when I press the plus button,and remove it when I press it again.
How can I remove the gap between the "to do list" div and "dfsdfs" li without removing any html tags?
If I remove the input tag id = "searchBox" (currently height = 0) the problem get solved, but I need the input tag.
Just cant find the problem why I cant fit them whithout any space.
$("ul").on("click","span",function (){
$(this).parent().fadeOut(500,function () {
$(this).remove();
});
})
$("ul").on("click","li",function (){
$(this).toggleClass("lineThrough");
})
$("#plusBtn").on("click",function(){
})
$("#searchBox").on("keypress",function(k){
if(k.which == 13){
var newTodo = $("#searchBox").val();
var newTodo = "<li><span><i class='far fa-trash-alt'></i></span>"+newTodo+"</li>"
if($("#searchBox").val() != ""){
$("#toDos").append(newTodo);
$(this).val("");
}
}
})
body{
background-image:linear-gradient(to right, #076585 ,#fff); ;
}
#table{
width: 350px;
margin: 100px auto;
box-shadow: 5px 5px 20px #79777767;
}
#todoTitle{
background: rgb(88, 88, 214);
height: 45px;
line-height: 50px;
padding-left: 10px;
color: whitesmoke;
font-size: 25px;
}
#plusBtn{
background: transparent;
border: 0;
color: white;
font-weight: bold;
font-size: 45px;
float: right;
line-height: 45px;
outline: none;
}
#searchBox{
width: 100%;
border: 0;
padding: 0;
height: 0;
font-size: 20px;
padding-left: 10px;
color: gray;
box-sizing: border-box;
}
#toDos{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
padding: 0;
width: 100%;
background: rgb(240, 240, 240);
box-sizing: border-box;
height: 45px;
line-height: 45px;
font-size: 25px;
color: gray;
}
li:nth-child(2n){
background: white;
}
.lineThrough{
text-decoration: line-through;
color: rgb(182, 179, 179);
}
span{
text-align: center;
color: white;
width: 0;
height: 45px;
display: inline-block;
background: rgb(248, 46, 46);
margin-right:12px;
border: 0;
opacity: 0;
}
li:hover span{
width: 45px;
transition:.2s linear ;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TO DO LIST</title>
<link rel="stylesheet" type="text/css" href="tdl_css.css">
<script type = "text/javascript" src="jquery-3.4.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Gupter&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300i&display=swap" rel="stylesheet">
<link rel = "stylesheet" type ="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
<div id = "table">
<div id = "todoTitle">TO-DO LIST
<button id= "plusBtn">+</button>
</div>
<input type="text" id = "searchBox" placeholder="Add New Todo"></input>
<ul id="toDos">
<li>dsfsdfs</li>
</ul>
</div>
<script type = "text/javascript" src="tdl_js.js"></script>
</body>
</html>
Instead of setting the input's width or height to 0, use display: none to remove it from the layout flow entirely.
Have you tried executing a script to manipulate the display:
if( element.style.display === 'block') {
document.getElementById("searchBox").style.display = 'none';
}
else {
document.getElementById("searchBox").style.display = 'block';
}
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>