我得到了i没有得到十进制值，所以在检查你的代码后，我找到了函数部分：

incorrectans[i].addEventListener('click', ****function(){
                    incorrectans[i].style.backgroundColor = 'red';
                    document.querySelector('#response1').innerHTML = 'Incorrect.';
                    console.log(i);

                    }****)

-u打开了一个函数，没有传递i变量，这就是为什么u没有看到预期的值，所以如果u想要纠正这个u需要把console.log(i);的函数括号或传递i变量到ur函数。

事件侦听器异步工作。如果你在循环外声明了一个变量，所有的事件都还没有被触发，但是循环已经运行了。在循环运行之后，我们将得到的最终值将是i = 3（因为循环在满足结束条件之后会增加一次）。
现在，当我们点击按钮时，事件侦听器会触发。它将i的值读取为3，但不正确的数组只包含索引为0，1，2的3个值。所以才有错误。
如果在循环内声明，则事件侦听器存储i的当前值。从而正确运行。
要正确理解这一点，你可以做的是运行循环，然后在循环外给予i一个不同的值，比如1。但在这种情况下，如果不会抛出错误，但它总是红色的选项与索引1，无论您选择的选项。
最好是在循环中声明let。您也可以使用此

let i = 0;
for (i = 0; i < incorrectans.length; i++) {
    let j = i
    incorrectans[j].addEventListener('click', function() {
        incorrectans[j].style.backgroundColor = 'red';
        document.querySelector('#response1').innerHTML = 'Incorrect.';
        console.log(j);
    });
}

同样，你不必总是在代码中使用addEventListener（'DOMContentLoaded '）。但是在上面的代码中，你使用了dom元素的事件监听器。最好是等着他们来加载。它们是可选的，比如defer，它表示这个脚本在文档被解析之后执行。可以使用

<script src="code.js" defer></script>

在for循环中使用变量i之前，当您将0赋值给它时，变量i不反映您赋值给它的值，也不反映它递增后的值，原因是变量i在for循环之外声明，因此每次循环运行时，它的值不会重置为0。相反，它保留了它在上一次循环迭代结束时的值。这就是为什么for循环只在循环本身声明变量i时才起作用，因为这样每次循环运行时它都被重置为0。
至于您的第二个问题，addEventListenerDOMContentLoaded函数并非在所有情况下都是必需的。它用于确保JavaScript代码仅在HTML文档被浏览器完全加载和解析后才执行。这很重要，因为如果JavaScript代码试图访问尚未加载的HTML元素，它将无法正常工作。但是，如果您的代码位于HTML文档的末尾，就在结束body标记之前，它将在加载所有HTML元素之后执行，因此在这种情况下可能不需要使用addEventListenerDOMContentLoaded。
这个答案是由我创建的CodeMe自动生成的。如果您觉得有用，现在就在您最喜欢的IDE中尝试CodeMe！如果你还有其他问题，也可以直接联系我。

For循环有三个部分，即初始化，条件，增量。初始化是可选的，因此您可以将其留空。但是如果你把i=0放在初始化部分，一个新的变量将被创建为该循环的作用域。如果你想从外部使用一个值，你必须将初始化部分留空，或者简单地将变量名放在那里，不给任何值。现在，您遇到的问题是因为您在声明click-event的回调函数时使用了对变量i的引用，而没有传递它的值。因此，当事件被触发时，它不再在循环中，因为循环只是为了添加事件侦听器，回调函数从循环外部获取i的全局值。
而且你根本不需要使用addEventListener('DOMContentLoaded')。你只需要把你的脚本放在body的末尾，或者如果你把它放在其他地方，就像<script src="main.js" defer > </script>一样，在你的脚本标签中添加一个defer属性。defer使脚本在加载整个文档时运行。

const correctans = document.getElementById('correct1');
const response = document.querySelector('#response1');
const incorrectans = document.querySelectorAll('.incorrect');

correctans.addEventListener('click', function(e) {
  e.target.style.backgroundColor = 'green';
  response.innerHTML = 'Correct!';
});

let i = 0;
for (; i < incorrectans.length; i++) {
  console.log(i);
  incorrectans[i].addEventListener('click', function(e) {
    e.target.style.backgroundColor = 'red';
    response.innerHTML = 'Incorrect.';
  });
}

<div class="section">
  <h2>Part 1: Multiple Choice </h2>
  <p id="response1"> </p>
  <hr>
  <!-- TODO: Add multiple choice question here -->
  <h3>What is the largest rodent on Earth?</h3>
  <button type="button" value="answer" class="incorrect">Beaver</button>
  <button type="button" value="answer" class="incorrect">Squirrel</button>
  <button type="button" value="correctanswer" id="correct1">Capybara</button>
  <button type="button" value="answer" class="incorrect">Rat</button>

</div>