학교 프로젝트 - 핀 및 onclick 이벤트가있는 IMG

내 학교 프로젝트의 경우, 내 그룹과 나는 "Brandts"라는 덴마크의 특정 지역에서 내비게이션을위한 웹 앱을 만들고 있으므로 하드 코드 된 핀이있는지도를 만들었습니다. 따라서 핀을 클릭하면 원하는 상점이 열립니다 (핀에는 지정된 상점이 있음). 학교 프로젝트 - 핀 및 onclick 이벤트가있는 IMG

내 생각이

각 div에 대한 onclick를 만들기 위해 단지했지만, 문제가 시작되는 곳이다. 나는 더 이상 얻을 수 없다. HTML과 JavaScript는 아래에 링크되어 있습니다.

HTML :

<body> 
    <div class="map"> 
     <img src="img/map.png" alt="kort over brandts klædefabrik området" /> 
     <div id="myBtn" class="cuckoosBox"></div> 
    </div> 
</body>

자바 스크립트 :

var modal = document.getElementById("myModal"); 

var btn = document.getElementById("myBtn"); 
var span = document.getElementsByClassName("close")[0]; 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 
span.onclick = function() { 
    modal.style.display = "none"; 
}

출처

2017-12-13 Frederik Bruun

Y의 작동 방식에 대한 체크 아웃 더 "[btn.addEventListener ("click ", function() {})'] (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)를 사용해야합니다. – Siphalor

가 (이) 키워드를 사용하는 방법에 대한 생각 했습니까?

키워드는 사용자가 클릭하는 것을 인식하고 이후에도 onclick 함수를 전달할 수 있으므로 도움이 될 수 있습니다.

같은 것을해야

(this.btn).onclick = function() { Code here };

// 또는

(this.div).onclick = function() { };

"이"키워드 여기

http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/

출처

2017-12-13 22:54:30 rforcier2

감사합니다! 나는 내 그룹과 함께 내일 볼 것이다 : –

또한이 사이트는 아마 설명을 위해 더 좋다 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this – rforcier2

또한 보인다 나는 실수를했고 .click 이벤트에 사용할 jQuery를 생각하고 있었다. "jQuery가 이벤트를 트리거 한 DOM 요소를 항상 참조하게 만드는 일부 JavaScript 마법을 수행하기 때문에 가장 쉬운 방법 인 jQuery를 사용할 수 있다면 JavaScript를 사용해야하는 이유 중 하나가 프레임 워크 대신 자신의 롤링. " 자바 스크립트에서 this 키워드는 자바 스크립트에서 객체의 현재 인스턴스를 나타냅니다. . '$ (". ToggleButton을")을 클릭 (함수() { $ (이) .toggleClass) ("활성은"; $ "강조"(이) .removeClass(); ' – rforcier2

학교 프로젝트 - 핀 및 onclick 이벤트가있는 IMG

답변

관련 문제