问题描述
当蓝色框变成棕色框时，我想加10点。
我试图将score设置为0，将分值设置为10，但这是行不通的。
我发出“ +10分”警报，它向我显示警报，因此我猜问题出在DOM吗？
有什么建议么 ？
谢谢 ！
let moveCounter = 0; let score = 0; let obs = 10; document.getElementById('score').textContent = '0'; var grid = document.getElementById("grid-box"); for (var i = 1; i <= 49; i++) { var square = document.createElement("div"); square.className = 'square'; square.id = 'square' + i; grid.appendChild(square); } var obstacles = []; while (obstacles.length < 10) { var randomIndex = parseInt(49 * Math.random()); if (obstacles.indexOf(randomIndex) === -1) { obstacles.push(randomIndex); var drawObstacle = document.getElementById('square' + randomIndex); $(drawObstacle).addClass("ob") } } var playerOne = []; while (playerOne.length < 1) { var randomIndex = parseInt(49 * Math.random()); if (playerOne.indexOf(randomIndex) === -1) { playerOne.push(randomIndex); var drawPone = document.getElementById('square' + randomIndex); $(drawPone).addClass("p-0") } } var addPoints = $('#score'); $('#button_right').on('click', function() { if ($(".p-0").hasClass("ob")) { alert('add +10 points !!!') addPoints.text( parseInt(addPoints.text()) + obs ); } moveCounter += 1; if ($(".p-0").hasClass("ob")) { } $pOne = $('.p-0') $pOneNext = $pOne.next(); $pOne.removeClass('p-0'); $pOneNext.addClass('p-0'); });
#grid-box { width: 400px; height: 400px; margin: 0 auto; font-size: 0; position: relative; } #grid-box>div.square { font-size: 1rem; vertical-align: top; display: inline-block; width: 10%; height: 10%; box-sizing: border-box; border: 1px solid #000; } .ob { background-color: brown; } .p-0 { background-color: blue; }
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <div id="grid-box"> </div> <div class="move"> <button id="button_right">right</button><br> </div> <div id="score"> </div>
非常感谢你！ 我是JavaScript / JQuery的新手，非常感谢！
1楼
您正在尝试更改ID为“ score”的div内部的HTML。
使用$("#id")选择css元素会检索DOM元素，而不是其内容，因此直接将分数添加到它不会有任何后果。
您要执行的操作是：更新score变量，然后将div内的HTML设置为score值。 因此，不仅是：
addPoints += obs
你应该
score += obs
addPoints.html(score)