Cannot read property 'addEventListener' of undefined

183

19 июля 2017, 21:59

файл index.js

import {createStore } from 'redux';
function audios(state = [], action){
  if (action.type === 'AddCanal'){
    return[
      ...state,
      action.payload
    ];
  }
  return state;
}
const store = createStore(audios);
store.subscribe(() => {
  console.log('subscribe', store.getState());
  const list = document.querySelectorAll('.list')[0];
  store.getState().forEach(audio => {
    const li = document.createElement('li');
    li.textContent = audio;
    list.appendChild(li);
  });
})
const addBtn = document.querySelectorAll('.add')[0];
addBtn.addEventListener('click', () => {
  const audioName = document.querySelectorAll('.audioInput')[0].value;
  console.log('audioName', audioName);
  store.dispatch({type: 'AddCanal', payload: audioName});
});

файл index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8"/>
        <title>Radio Boss</title>
        <!-- <link type="text/css" rel="stylesheet" href = "./stylesheets/styleLogin.css">
        <link type="text/css" rel="stylesheet" href="./stylesheets/main.css" />
        <link type="text/css" rel="stylesheet" href="./stylesheets/profile.css" />
        <link type="text/css" rel="stylesheet" href="./stylesheets/help.css" />
        <link type="text/css" rel="stylesheet" href="./stylesheets/edit.css" />
        <link type="text/css" rel="stylesheet" href="./stylesheets/user.css" />
        <link type="text/css" rel="stylesheet" href="./stylesheets/add.css" /> -->
    </head>
    <body>
      <input type="text" className="audioInput" />
      <button className="add">Сохранить</button>
      <ul className="list">
        <li></li>
      </ul>
        <div id="form"></div>

        <script type="text/javascript" src="./build/app.js"></script>
    </body>
</html>

Answer 1

Вы написали <button className="add">Сохранить</button> а должно быть <button class="add">Сохранить</button>. Вот пример кода, и оно работает:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset = "utf-8"/> 
        <title>Radio Boss</title> 
        <!-- <link type="text/css" rel="stylesheet" href = "./stylesheets/styleLogin.css"> 
        <link type="text/css" rel="stylesheet" href="./stylesheets/main.css" /> 
        <link type="text/css" rel="stylesheet" href="./stylesheets/profile.css" /> 
        <link type="text/css" rel="stylesheet" href="./stylesheets/help.css" /> 
        <link type="text/css" rel="stylesheet" href="./stylesheets/edit.css" /> 
        <link type="text/css" rel="stylesheet" href="./stylesheets/user.css" /> 
        <link type="text/css" rel="stylesheet" href="./stylesheets/add.css" /> --> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
        <script type="text/babel"> 
            const addBtn = document.querySelectorAll('.add')[0]; 
            addBtn.addEventListener('click', () => { 
            console.log('clicked'); 
            }); 
        </script> 
    </head> 
    <body> 
        <input type="text" className="audioInput" /> 
        <button class="add">Сохранить</button> 
        <ul className="list"> 
            <li></li> 
        </ul> 
        <div id="form"></div> 
 
 
        <script type="text/javascript" src="./build/app.js"></script> 
    </body> 
</html>

Я просто здесь поменял обработчик клика и добавил в нем console.log что бы здесь увидели работу кода.