I'm doing an easy note creator in JavaScript, just to improve my knowledge in web development.
So, I've almost did everything: but I've a problem:
if($("div").length != 0)
$("div").click(function() {
for(var i = 0;i < $("div").length;i++)
{
$("div").remove();
}
});
If I open my page and I put it in console, it works.
If I put it in my JS file, the DOM doesn't load it.
Can I know why of that?
$("button.add").click(function() {
var text = document.querySelector("input").value;
var x = document.createElement("div");
x.innerHTML = text;
document.body.appendChild(x);
});
if ($("div").length != 0)
$("div").click(function() {
for (var i = 0; i < $("div").length; i++) {
$("div").remove();
}
});
body {
background-color: lightblue;
margin: 5%;
}
input,
button {
border: none;
padding: 10px;
display: block;
margin: 0 auto;
}
button {
background-color: #fff;
margin-top: 10px;
opacity: 0.9;
}
input:focus {
opacity: 0.9;
outline: none;
}
div {
background-color: #fff;
padding: 5%;
width: 10%;
color: #ccc;
display: inline;
transition: 0.4s;
}
div:hover {
background-color: #b71c1c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Matteo Notes</title>
<link rel="stylesheet" href="C:\Users\User\Desktop\Dash\Notes\style.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
</head>
<body>
<input type="text" placeholder="Add...">
<button class="add">Add</button>
<button class="remove">Remove</button>
<script src="script.js" type="text/javascript"></script>
</body>
</html>