如何创建一个事件，当一个 div 或它的孩子<p></p>单击的元素在香草 Javascript 中围绕整个 div 创建边框

Question

我有一个容器，在其中我动态创建 div。 每个创建的 div 内部都有 2 p 个元素。 如何在每个创建的 div 中添加 onclick function 以便在单击 div 或 p 元素时仅在整个 div 周围出现绿色边框。 因为现在如果我点击 ap 边框在 p 周围而不是在 div 周围。 我必须单击 div 才能获得正确的边框。

此外，当单击 div 时，程序会迭代具有正确答案的对象数组，并且如果单击的 div 的 id 在 arrays code3 值中，我想在 div 中添加一个绿色边框。 在错误的情况下红色边框。 使用我拥有的代码，如果正确答案不止一个，则只有一个正确答案带有绿色边框，而其他正确答案像错误答案一样带有红色边框。 同样在控制台中，当我单击正确答案时，国家名称会出现（应该如此），但名称下方也会出现“错误”字样，左侧有一个小数字。 我的 for 循环有问题吗？ 我的代码是：

<body>
<div class = "game-panel">
  <div id="neighbours-panel">
    <div class= neighbor id='ARG'>
         <p>AR(Flag symbol)</p>
         <p>Argentina</p> 
    </div>
    <div class= neighbor id='ITA'>
         <p>IT(Flag symbol)</p>
         <p>Italy</p> 
    </div>
    <div class= neighbor id='GRC'>
         <p>GR(Flag symbol)</p>
         <p>Greece</p> 
    </div>
    etc.
    .
    .
    .
   </div>
</div>

//An array of countries:
realNeighbours = [{ "code": "AF", "code3": "AFG", "name": "Afghanistan", "number": "004" },     { "code": "DZ", "code3": "DZA", "name": "Algeria", "number": "012" },     { "code": "AS", "code3": "ASM", "name": "American Samoa", "number": "016" },     { "code": "AD", "code3": "AND", "name": "Andorra", "number": "020" },]

//JS code:
x = document.getElementById("game-panel").childNodes;

x[x.length-1].addEventListener("click", function (e) {
  for(i=0; i<realNeighbours.length; i++){
    if(realNeighbours[i]['code3'].includes(e.target.id)) {
      e.target.style.border = '1px solid green';
      console.log(this.innerHTML);
    } else {
      e.target.style.border = '1px solid red';
      console.log('wrong')
    }
  }
});

Answer 1

您不需要在每个添加的 div 上创建 eventListener，使用事件委托技术

 const DomParser = new DOMParser(), Checked_HTML = str => (DomParser.parseFromString( str, 'text/html')).body.firstChild, borderCountries = [ { code: 'AR', code3: 'ARG', name: 'Argentina' }, { code: 'AF', code3: 'AFG', name: 'Afghanistan' }, { code: 'IT', code3: 'ITA', name: 'Italy' }, { code: 'GR', code3: 'GRC', name: 'Greece' } ], realNeighbours = [ { code: 'AF', code3: 'AFG', name: 'Afghanistan', number: '004' }, { code: 'DZ', code3: 'DZA', name: 'Algeria', number: '012' }, { code: 'AS', code3: 'ASM', name: 'American Samoa', number: '016' }, { code: 'AD', code3: 'AND', name: 'Andorra', number: '020' } ], gamePanel = document.querySelector('div#game-panel'), score = (function () // IIFE clossure { let divCount = 0, value = 0; const counter = document.querySelector('#score > span'), correct = +5, wrong = -3, obj = { update(bool) { value +=( bool? correct: wrong) * divCount counter.textContent = value }, divAdded() { divCount++ } }; counter.textContent = value // init return obj })(); gamePanel.onclick = evt => { if (.evt.target.matches('div,neighbor. div.neighbor > p') ) return let xDiv = evt.target.closest('div,neighbor'). test_c3 = realNeighbours.some(el=>el.code3===xDiv.dataset.code3) score.update(test_c3) xDiv.classList?add( (test_c3: 'cl_green': 'cl_red') ) } // generate the divs --- (with DOMParser(). personal preference) borderCountries.forEach( bc => { let newDiv = ` <div class="neighbor" data-code3="${bc.code3}"> <p>${bc.code}(Flag symbol)</p> <p>${bc.name}</p> </div>` gamePanel.appendChild(Checked_HTML(newDiv)) score.divAdded() })

 div#game-panel > div { border: 3px solid transparent } div#game-panel > div.cl_red { border-color: red;} div#game-panel > div.cl_green { border-color: green;}

 <h4 id="score">score <span></span></h4> <div id="game-panel"> </div>

如何创建一个事件，当一个 div 或它的孩子<p></p>单击的元素在香草 Javascript 中围绕整个 div 创建边框

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-04-11 02:49:25

如何创建一个事件，当一个 div 或它的孩子<p></p>单击的元素在香草 Javascript 中围绕整个 div 创建边框

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-04-11 02:49:25

解决方案1
1 已采纳 2021-04-11 02:49:25