javascript to-do list not adding new entry to to-do list [duplicate]
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
-1
This question already has an answer here:
Why does jQuery or a DOM method such as getElementById not find the element?
6 answers
So,I'm trying to make a to-do list but nothings happening when I try to add a new list entry,any tips? Also,eventually I want it to be able to count the percentage of how many tasks I've clicked on ,aka crossed off the list.
<html>
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script>document.getElementById("todoadd").onclick = function()
var node = document.createElement("Li");
var text = document.getElementById("uzd").value;
var textnode =document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("uzduotys").appendChild(node);
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div id="myDIV" class="header">
<h2>To-Do</h2>
<input type="text" id='uzd' placeholder="Užduotis">
<input type="button" id='todoadd' >
</div>
</form>
<ul id='uzduotys'>
</ul>
</div>
</body>
</html>
javascript html css
edited Nov 15 '18 at 14:29
Federico klez Culloca
16.2k134381
asked Nov 15 '18 at 14:26
AuridasAuridas
103
marked as duplicate by Praveen Kumar Purushothaman css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 15 '18 at 14:31
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
-1
This question already has an answer here:
Why does jQuery or a DOM method such as getElementById not find the element?
6 answers
So,I'm trying to make a to-do list but nothings happening when I try to add a new list entry,any tips? Also,eventually I want it to be able to count the percentage of how many tasks I've clicked on ,aka crossed off the list.
<html>
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script>document.getElementById("todoadd").onclick = function()
var node = document.createElement("Li");
var text = document.getElementById("uzd").value;
var textnode =document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("uzduotys").appendChild(node);
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div id="myDIV" class="header">
<h2>To-Do</h2>
<input type="text" id='uzd' placeholder="Užduotis">
<input type="button" id='todoadd' >
</div>
</form>
<ul id='uzduotys'>
</ul>
</div>
</body>
</html>
javascript html css
edited Nov 15 '18 at 14:29
Federico klez Culloca
16.2k134381
asked Nov 15 '18 at 14:26
AuridasAuridas
103
marked as duplicate by Praveen Kumar Purushothaman css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 15 '18 at 14:31
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Are there errors in your browser's console? But you run the code before elements are available on the page; move the script to the bottom, before the closing body tag.
– Andy G
Nov 15 '18 at 14:28
code works above so what is different? Any errors in your console? Something like "Uncaught TypeError: Cannot read property 'onclick' of null"
– epascarello
Nov 15 '18 at 14:30
add a comment |
-1
-1
-1
This question already has an answer here:
Why does jQuery or a DOM method such as getElementById not find the element?
6 answers
So,I'm trying to make a to-do list but nothings happening when I try to add a new list entry,any tips? Also,eventually I want it to be able to count the percentage of how many tasks I've clicked on ,aka crossed off the list.
<html>
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script>document.getElementById("todoadd").onclick = function()
var node = document.createElement("Li");
var text = document.getElementById("uzd").value;
var textnode =document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("uzduotys").appendChild(node);
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div id="myDIV" class="header">
<h2>To-Do</h2>
<input type="text" id='uzd' placeholder="Užduotis">
<input type="button" id='todoadd' >
</div>
</form>
<ul id='uzduotys'>
</ul>
</div>
</body>
</html>
javascript html css
edited Nov 15 '18 at 14:29
Federico klez Culloca
16.2k134381
asked Nov 15 '18 at 14:26
AuridasAuridas
103
This question already has an answer here:
Why does jQuery or a DOM method such as getElementById not find the element?
6 answers
So,I'm trying to make a to-do list but nothings happening when I try to add a new list entry,any tips? Also,eventually I want it to be able to count the percentage of how many tasks I've clicked on ,aka crossed off the list.
<html>
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script>document.getElementById("todoadd").onclick = function()
var node = document.createElement("Li");
var text = document.getElementById("uzd").value;
var textnode =document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("uzduotys").appendChild(node);
</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div id="myDIV" class="header">
<h2>To-Do</h2>
<input type="text" id='uzd' placeholder="Užduotis">
<input type="button" id='todoadd' >
</div>
</form>
<ul id='uzduotys'>
</ul>
</div>
</body>
</html>
This question already has an answer here:
Why does jQuery or a DOM method such as getElementById not find the element?
6 answers
javascript html css
javascript html css
edited Nov 15 '18 at 14:29
Federico klez Culloca
16.2k134381
asked Nov 15 '18 at 14:26
AuridasAuridas
103
edited Nov 15 '18 at 14:29
Federico klez Culloca
16.2k134381
asked Nov 15 '18 at 14:26
AuridasAuridas
103
edited Nov 15 '18 at 14:29
Federico klez Culloca
16.2k134381
edited Nov 15 '18 at 14:29
Federico klez Culloca
16.2k134381
edited Nov 15 '18 at 14:29
Federico klez Culloca
16.2k134381
16.2k134381
asked Nov 15 '18 at 14:26
AuridasAuridas
103
asked Nov 15 '18 at 14:26
AuridasAuridas
103
asked Nov 15 '18 at 14:26
AuridasAuridas
103
103
marked as duplicate by Praveen Kumar Purushothaman css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 15 '18 at 14:31
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Praveen Kumar Purushothaman css
Users with the css badge can single-handedly close css questions as duplicates and reopen them as needed.
StackExchange.ready(function()
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function()
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function()
$hover.showInfoMessage('',
messageElement: $msg.clone().show(),
transient: false,
position: my: 'bottom left', at: 'top center', offsetTop: -7 ,
dismissable: false,
relativeToBody: true
);
,
function()
StackExchange.helpers.removeMessages();
);
);
);
Nov 15 '18 at 14:31
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
1
Are there errors in your browser's console? But you run the code before elements are available on the page; move the script to the bottom, before the closing body tag.
– Andy G
Nov 15 '18 at 14:28
code works above so what is different? Any errors in your console? Something like "Uncaught TypeError: Cannot read property 'onclick' of null"
– epascarello
Nov 15 '18 at 14:30
add a comment |
1
Are there errors in your browser's console? But you run the code before elements are available on the page; move the script to the bottom, before the closing body tag.
– Andy G
Nov 15 '18 at 14:28
code works above so what is different? Any errors in your console? Something like "Uncaught TypeError: Cannot read property 'onclick' of null"
– epascarello
Nov 15 '18 at 14:30
1
1
Are there errors in your browser's console? But you run the code before elements are available on the page; move the script to the bottom, before the closing body tag.
– Andy G
Nov 15 '18 at 14:28
Are there errors in your browser's console? But you run the code before elements are available on the page; move the script to the bottom, before the closing body tag.
– Andy G
Nov 15 '18 at 14:28
code works above so what is different? Any errors in your console? Something like "Uncaught TypeError: Cannot read property 'onclick' of null"
– epascarello
Nov 15 '18 at 14:30
code works above so what is different? Any errors in your console? Something like "Uncaught TypeError: Cannot read property 'onclick' of null"
– epascarello
Nov 15 '18 at 14:30
add a comment |
1 Answer
1
active
oldest
votes
1
Try to add the script underneath the button. Else your JavaScript can't find the button because it isn't loaded yet.
So something like this:
<html>
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div id="myDIV" class="header">
<h2>To-Do</h2>
<input type="text" id='uzd' placeholder="Užduotis">
<input type="button" id='todoadd' >
</div>
</form>
<ul id='uzduotys'>
</ul>
</div>
<script>
document.getElementById("todoadd").onclick = function()
var node = document.createElement("Li");
var text = document.getElementById("uzd").value;
var textnode =document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("uzduotys").appendChild(node);
</script>
</body>
</html>
answered Nov 15 '18 at 14:28
JKLJKL
17613
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Try to add the script underneath the button. Else your JavaScript can't find the button because it isn't loaded yet.
So something like this:
<html>
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div id="myDIV" class="header">
<h2>To-Do</h2>
<input type="text" id='uzd' placeholder="Užduotis">
<input type="button" id='todoadd' >
</div>
</form>
<ul id='uzduotys'>
</ul>
</div>
<script>
document.getElementById("todoadd").onclick = function()
var node = document.createElement("Li");
var text = document.getElementById("uzd").value;
var textnode =document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("uzduotys").appendChild(node);
</script>
</body>
</html>
answered Nov 15 '18 at 14:28
JKLJKL
17613
add a comment |
1
Try to add the script underneath the button. Else your JavaScript can't find the button because it isn't loaded yet.
So something like this:
<html>
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div id="myDIV" class="header">
<h2>To-Do</h2>
<input type="text" id='uzd' placeholder="Užduotis">
<input type="button" id='todoadd' >
</div>
</form>
<ul id='uzduotys'>
</ul>
</div>
<script>
document.getElementById("todoadd").onclick = function()
var node = document.createElement("Li");
var text = document.getElementById("uzd").value;
var textnode =document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("uzduotys").appendChild(node);
</script>
</body>
</html>
answered Nov 15 '18 at 14:28
JKLJKL
17613
add a comment |
1
1
1
Try to add the script underneath the button. Else your JavaScript can't find the button because it isn't loaded yet.
So something like this:
<html>
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div id="myDIV" class="header">
<h2>To-Do</h2>
<input type="text" id='uzd' placeholder="Užduotis">
<input type="button" id='todoadd' >
</div>
</form>
<ul id='uzduotys'>
</ul>
</div>
<script>
document.getElementById("todoadd").onclick = function()
var node = document.createElement("Li");
var text = document.getElementById("uzd").value;
var textnode =document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("uzduotys").appendChild(node);
</script>
</body>
</html>
answered Nov 15 '18 at 14:28
JKLJKL
17613
Try to add the script underneath the button. Else your JavaScript can't find the button because it isn't loaded yet.
So something like this:
<html>
<head>
<title>Site</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form>
<div id="myDIV" class="header">
<h2>To-Do</h2>
<input type="text" id='uzd' placeholder="Užduotis">
<input type="button" id='todoadd' >
</div>
</form>
<ul id='uzduotys'>
</ul>
</div>
<script>
document.getElementById("todoadd").onclick = function()
var node = document.createElement("Li");
var text = document.getElementById("uzd").value;
var textnode =document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("uzduotys").appendChild(node);
</script>
</body>
</html>
answered Nov 15 '18 at 14:28
JKLJKL
17613
answered Nov 15 '18 at 14:28
JKLJKL
17613
answered Nov 15 '18 at 14:28
JKLJKL
17613
answered Nov 15 '18 at 14:28
JKLJKL
17613
17613
add a comment |
add a comment |
1
Are there errors in your browser's console? But you run the code before elements are available on the page; move the script to the bottom, before the closing body tag.
– Andy G
Nov 15 '18 at 14:28
code works above so what is different? Any errors in your console? Something like "Uncaught TypeError: Cannot read property 'onclick' of null"
– epascarello
Nov 15 '18 at 14:30