Entrar Ainda não tem acesso?
9
respostas

Não aparece nada

Referente ao curso JavaScript na Web: manipule o DOM com JavaScript, no capítulo Comportamento do formulário e atividade Capturando valor do input

por Kaio miguel ruiz
| 83.2k xp | 87 posts

Não está aparecendo nada e nem o input,como solucionar, não acho aonde errei...

Insira aqui a descrição dessa imagem para ajudar na acessibilidade 

const novatarefa = document.querySelector('[data-form-button]')

document.querySelector('[data-form-input]')

console.log(input)
novatarefa.addEventListener('click',()=>{
    console.log('fui clicado')})![]()
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=BioRhyme&amp;family=Space+Mono&amp;display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Ceep</title>
</head>
<body>
  <div class="app">
    <div class="todo-list">
      <h1 class="title">
        Ceep
      </h1>

      <form class="form" action="">
        <input class="form-input" type="text" data-form-input>
        <button class="form-button" data-form-button> Novo Item </button>
      </form>

      <ul class="list">
        <li class="task">
          <p class="content">
            Comprar um abacate
          </p>

      </ul>
    </div>
    <script>src="listaDeTarefas.js"</script>
</body>
</html>
9 respostas
por Jose Gonzalez
| 50k xp | 22 posts
Alura Scuba Team

Olá Kaio, todo bom.

No HTML a tag script o atributo src="listaDetarefa".js debe ficar dentro da tag de esta forma <script src="listaDeTarefas.js"></script>.

Agora no javascript o código debe ficar de esta forma:

const novatarefa = document.querySelector('[data-form-button]')

document.querySelector('[data-form-input]')

//console.log(input)

novatarefa.addEventListener('click', event => {
    event.preventDefault()
    console.log('foi clicado')
})

Ai o parámetro event é passado junto com o preventDefault para dessa manera evitar que o navegaor se atualice automáticamente, esse é um comportamento padrão do navegador.

por Kaio miguel ruiz
| 83.2k xp | 87 posts

Continua dando erro, já corrigi la no html mas o erro continua, não aparece o input mesmo fazendo tudo...

DevTools failed to load source map: Could not load content for file:///C:/Users/kaio/Documents/1823_DOM-projeto_incial/1823_DOM-projeto_incial/projeto_inicial/assets/css/style.css.map: System error: net::ERR_FILE_NOT_FOUND

const novatarefa = document.querySelector('[data-form-button]')

const input = document.querySelector('[data-form-input]')

console.log(input)

novatarefa.addEventListener('click', ()=> {
    console.log('fui clicado')})
por Jose Gonzalez
| 50k xp | 22 posts
Alura Scuba Team

Opa Kaio. todo certo?

prova passando o parámetro event em tua arrow function depois encima de console.log('foi clicado') coloca assim:

event.preventDefault()

Essa parte do código ficaria assim:

novatarefa.addEventListener('click', (event) => {
    event.preventDefault()
    console.log('foi clicado')
})

Quando testar, Me disse o que aconteceu!!

por Kaio miguel ruiz
| 83.2k xp | 87 posts

Deu outro erro agora:

listaDeTarefas.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND gen204:1 Failed to load resource: net::ERR_FILE_NOT_FOUND gen204:1 Failed to load resource: net::ERR_FILE_NOT_FOUND DevTools failed to load source map: Could not load content for file:///C:/Users/kaio/Documents/1823_DOM-projeto_incial/1823_DOM-projeto_incial/projeto_inicial/assets/css/style.css.map: System error: net::ERR_FILE_NOT_FOUND

const novatarefa = document.querySelector('[data-form-button]')

const input = document.querySelector('[data-form-input]')

novatarefa.addEventListener('click', (event) => {
    event.preventDefault()
    console.log('foi clicado')
})
por Jose Gonzalez
| 50k xp | 22 posts
Alura Scuba Team

Blz,

agora poderia compartilhar teu html, para ve como ficou por favor

por Kaio miguel ruiz
| 83.2k xp | 87 posts
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=BioRhyme&amp;family=Space+Mono&amp;display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Ceep</title>
</head>
<body>
  <div class="app">
    <div class="todo-list">
      <h1 class="title">
        Ceep
      </h1>

      <form class="form" action="">
        <input class="form-input" type="text" data-form-input>
        <button class="form-button" data-form-button> Novo Item </button>
      </form>

      <ul class="list">
        <li class="task">
          <p class="content">
            Comprar um abacate
          </p>

      </ul>
    </div>
    <script src="listaDeTarefas.js"></script>
</body>
</html>
por Renata da Silva Heying
| 40.2k xp | 17 posts

Oi Kaio. Onde você salvou o arquivo listaDeTarefas.js? Na mesma pasta do index.html?

por Rutyelle dos Santos Brito
| 59k xp | 9 posts
Software Engineering

Kaio, tudo bem?

Tomei a liberdade de pegar seu código e ajustar os erros encontrados e comentei os erros para te ajudar a estudar. Segue abaixo:

JS Antigo

const novatarefa = document.querySelector('[data-form-button]')

document.querySelector('[data-form-input]')

// O input não existe. Remover esse console.log
console.log(input)

// Não se usa o ![]() em uma chamada de um método.
novatarefa.addEventListener('click',()=>{
    console.log('fui clicado')})![]()

JS Novo

const novatarefa = document.querySelector('[data-form-button]')

document.querySelector('[data-form-input]')

novatarefa.addEventListener('click', (e) => {
  e.preventDefault()
  console.log('fui clicado')
})

No caso do HTML é como nosso amigo acima disse, a tag script estava errada. Então só vou colocar meu HTML aqui:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=BioRhyme&family=Space+Mono&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Ceep</title>
</head>
<body>
  <div class="app">
    <div class="todo-list">
      <h1 class="title">
        Ceep
      </h1>

      <form class="form" action="">
        <input class="form-input" type="text" data-form-input>
        <button class="form-button" data-form-button> Novo Item </button>
      </form>

      <ul class="list">
        <li class="task">
          <p class="content">
            Comprar um abacate
          </p>

      </ul>
    </div>
    <script src="listaDeTarefas.js"></script>
</body>
</html>

Sobre a organização de arquivos. Ambos devem ficar no mesmo nível.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Shows. Resolvemos os problemas mas, e o erro que continua aparecendo no console? Esse erro é pelo fato de ainda não existir esse arquivo "style.css", não há com o que se preocupar. Se cria-lo, com a mesma configuração de diretorio que está realizando o apontamento (assets/css/style.css) esse erro vai sumir.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Espero que isso lhe ajude.

Abraço!

por Jean Robert
| 98.6k xp | 30 posts

Fala Caio,

sei que já faz um tempo que criopu o tópico, mas vou te explicar qual é o problema.

No seu código você não está criando as variaveis para salvar o campo de input e nem o valor digitado. Você está apenas percorrendo o DOM e não esta fazendo nada além disso.

Segue o que você precisa fazer para resolver.

Coloquei comentários explicando o que cada linha faz. Os comentarios são às linhas que começam com //.

// Aqui você cria uma variavel para salvar onde fica o botão de nova tarefa.
const novaTarefa = document.querySelector('[data-form-button]')

// Aqui você está criando uma "tarefa" para ficar prestando atenção a sempre que houver um click no botão de nova tarefa
novaTarefa.addEventListener('click', (e) => {
    // Acima colocamos um "e" entre os parenteses. 
    // Isso captura os eventos que acontecem por padrão quando clica no botão

    // Abaixo você previne a pagina de executar a ação padrão quando clica no botão.     
    // A ação padrão é de recarregar a pagina. 
    // Ou seja, essa ação padrão não vai mais acontecer quando clicar no botão.
    e.preventDefault()

    // Aqui você cria a variavel que salva onde está campo de input
    const input = document.querySelector('[data-form-input]')

    // Aqui você vai salvar o valor digitado no campo de input
    const valor = input.value

    // Aqui você pede para o console mostrar esse valor
    console.log(valor)
})

Você pode remover os comentários quando copiar para o seu arquivo.