tsutsj231234
10
2021-04-08 21:06:56
3
87

자바스크립트 innerhtml onclick event 관련하여 질문 부탁드립니다.


현재 count up, down의 기능을 가진 웹 페이지를 만들고 있습니다 :)

 

기존과는 다르게 html 을 사용 하지 않고, 자바스크립트를 모듈화하여 개발을 진행하고 있는데, html 파일 내에서 코드를 작성 하지 않다보니 UI는 innerHTML로 처리를 하고 있습니다.


이 때, 문제가 발생하는데 innerHTML내의 버튼에 onclick 이벤트를 두었는데 function이 not defined 라는 이유로 계속 작동 되지 않는데 스택오버플로우나 기타 자료를 찾아봐도 해결이 안되어 글을 올리게 되었습니다


이해가 어려울까 싶어서 코드를 첨부 하겠습니다.. :) 




현재 구조는


index.html -> app.js -> Counter.js -> CounterFunction.js 순으로 import를 하여 사용하고 있습니다.


1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Cypress Counter</title>
<link rel="stylesheet" href="src/css/index.css" />
</head>
<body>
<div id="app"></div> // 이곳에 InnerHTML
<script defer type="module" src="src/js/index.js"></script>
</body>
</html>


2. index.js

import Counter from "./modules/Counter.js";

export default function App() {
new Counter({ $app: document.querySelector("#app") });
}

// #index.html에 존재하는 App이라는 아이디를 가진 div를 인자로 사용해서
// Counter에 넘겨준다.

App();


3. Counter.js

import { increase, decrease } from "./CounterFunction.js";

export default function Counter({ $app }) {
const render = () => {
$app.innerHTML = `
<div class="container">
<h1>ui counter</h1>
<div class="counter">
             // 문제의 녀석.
<a href="#" id="minus" class="minus-button" onclick=decrease()><span>-</span></a>
<input id="count" name="count" type="text" class="count-display" value="10">
  // 문제의 녀석.
            <a href="#" id="plus" class="plus-button" onclick=increase()><span>+</span></a>
</div>
</div>`;
};

const init = () => {
render();
};

init();
}



4. CounterFunction.js

function increase() {
const plus = document.getElementById("plus");
const value = document.getElementById("count").value;
plus.onclick = () => {
alert("hello");
};
}

function decrease() {
const minus = document.getElementById("minus");
const value = document.getElementById("count").value;
minus.onclick = () => {
alert("bye");
};
}

export { increase, decrease }; // 두 함수를 내보냄

0
  • 답변 3

  • tsutsj231234
    10
    2021-04-08 21:09:01
    도움 부탁드립니다..ㅠㅠ
  • agangel3399
    6
    2021-04-08 22:18:43
    함수 " 으로  안감싸도되나요?
    리액트인지 뷰인지 모르겟지만. Html에 펑션은  "로 감싸야되는걸로알고잇눈데...
  • tsutsj231234
    10
    2021-04-09 13:58:54

    감싸도 해결이 안되고,

    감싼 상태에서 " " ; 를 해도 실행이 되지 않습니다 :(

  • 로그인을 하시면 답변을 등록할 수 있습니다.