I'm trying to create a todo list with JS. The idea is to write something in the input and when the user clicks the button, he obtains a checkbox with the text on it.
The problem is that I don't how can I do it with JS. I tried to change the 'li' to an input and then setAttribute("type", "checkbox"), but nothing happened.
<!DOCTYPE html>
<html>
<head>
<title>Lista de tareas personal.</title>
<meta charset='utf-8'>
<style type="text/css">
body{
font-family: Helvetica, Arial;
}
li{
width: 50%;
list-style-type: none;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Lista de tareas personal.</h1>
<hr>
<br>
<button type="button" id="btn" onclick="añadirItems">Añadir Item</button>
<input type="text" id="texto">
<!---<ul id="lista">
</ul>-->
<ul id="ul">
</ul>
<script type="text/javascript">
function addItem(){
var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');//li
var text = document.getElementById('texto');
li.appendChild(document.createTextNode(text.value));
ul.appendChild(li);
}
var button = document.getElementById('btn');
button.onclick = addItem
</script>
</body>
</html>
any suggestions?
Aucun commentaire:
Enregistrer un commentaire