현재 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 }; // 두 함수를 내보냄
