이미지와 링크주소를 입력받아서 둘이 합쳐서 이미지를 클릭하면 링크 주소로 이동할 수 있게 만드는 기능을 구현해보려고 합니다.

그런데 도저히 되질 않아서 이렇게 글 남겨 봅니다...


https://DongHun.dbehdgns1215.repl.co


문제의 코드 첨부하겠습니다... 도저히 모르겠습니다..


<div class="title">
</div>
<div class="main-out">
<div class="main">
<div class="bookmark">
<div class="bookmark-item">
<div class="bookmark-item-title">
즐겨찾기
</div>
<div class="bookmark-item-detail">
<div id="target"></div>
</div>
<button class="bookmark-item-button">
<span class="btn_file">
<label for="inputImage"class="btn_model">
<b id=""class="btn2"onclick="clickcr(this,'prf.upimg','','',event);">사진과 링크를 추가해주세요.</b>
<input type="text"id="link">
<input type="file"id="inputImage"name="Image"accept="image/*">
<button id="submit">등록</button>
</label>
</span>
</button>
</div>
<script>
const text = document.querySelector("#link");
const text = document.querySelector("#inputImage");
const show = document.querySelector("#show");
const target = document.querySelector("#target");

submit.addEventListener("click", function (e) {
localStorage.setItem(link.value, inputImage.value);
})

show.addEventListener("click", function (e){
let arr= [];

for (var i = 0; i < localStorage.length; i++) {
let obj = {
link: localStorage.key(i)
password: localStorage.getItem.key(i)
}

arr[i] = obj;
}
console.log(arr);

target.innerHTML = JSON.stringigy(arr):
})
</script>