Javascript Não funciona a função de adicionar tarefa

romline5 · 8 de setembro de 2024

O código não funciona. Poderiam me ajudar? Tem um simples código javascript...

Arquivo index.html

<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>LISTA DE TAREFAS</title>
	<script type="text/javascript">
		let BotaoAdd = document.getElementById('botao');
		let Input = document.getElementById('input-tarefa');
		let Tarefas = document.getElementById('tarefas');
		let marcado = false;
		BotaoAdd.addEventListener('Click', function() {
			if (Input.value != '') {
				var tarefa = document.createElement('p');
				Tarefas.appendChild(tarefa);
				tarefa.innerText = '= ' + Input.value;
				Input.value = '';
				tarefa.addEventListener('click', function() {
					if (marcado == false) {
						tarefa.style.textDecoration = 'line-through';
						marcado = true;
					} else {
						tarefa.style.textDecoration = '';
						marcado = false;
					}
				})
				tarefa.addEventListener('dblclick', function() {
					 Tarefas.removeChild(tarefa);
				})
			}
		})
	</script>
</head>
<body>
	<div id="geral">
		<h1>Lista de Tarefas</h1>
		<input type="text" placeholder="digite sua tarefa" id="input-tarefa">
		<button id="botao">Adicionar</button>
		<div id="tarefas"></div>
	</div>
</body>
</html>

romline5 · 9 de setembro de 2024

Por favor algum programador javascript para me ajudar?

devair1010 · 9 de setembro de 2024

@romline5 olá , meu bom , esse seu códifo está funcionando bem sim, mas precisa colocar a extensão do arquivo ".html" após o nome do arquivo .

você já sabe que precisa usar um navegador para executar o código ? , e também qual compilador estás usando ? , esse aí da img é o Visual Studi Code , nele basta inserir o código e clicar em F5 e já abre o navegador com o resultado do código executado .

fernando c · 9 de setembro de 2024

<!DOCTYPE html>
<html lang="pt-br">
<body>
<h1>Lista de tarefas</h1>
<h2>com função appendChild()</h2>

<ul id="myList">
  <li>fazer café</li>
  <li>tomar banho</li>
</ul>

<p>preencha o campo e clique em adicionar para acrescentar uma tarefa à lista:</p>
<input type="text" placeholder="digite sua tarefa" id="input-tarefa">
<button onclick="myFunction()">adicionar</button>

<script>
function myFunction() {

// Create an "li" node:
const node = document.createElement("li");

// Create a text node:
const textnode = document.createTextNode(document.getElementById("input-tarefa").value);

// Append the text node to the "li" node:
node.appendChild(textnode);

// Append the "li" node to the list:
document.getElementById("myList").appendChild(node);
}
</script>

</body>
</html>

fonte: https://www.w3schools.com/jsreF/met_document_createelement.asp

romline5 · 10 de setembro de 2024

Obrigado pela ajuda! Mas eu acho que do jeito anterior o código ainda não funciona. Mesmo estando em .html

devair1010 · 10 de setembro de 2024

2 horas atrás, romline5 disse:

eu acho que do jeito anterior o código ainda não funciona

nessa imagem dá pra ver que ele está sendo executado e mostrou o resultado no navegador , então o que não funciona só pode ser o objetivo de armazenar as tarefas inseridas , ou alguma outra coisa , então o que não funciona ? ,

nesse vídeo tem boas informações sobre javaScript :

https://www.youtube.com/watch?v=OmmJBfcMJA8