HTML/Javascript 函数未执行

问题描述 投票：0回答：1

这里是 HTML 和 Javascript 新手。我正在尝试制作一个网页，允许您指定向您呈现随机数的次数（随机数将在您指定的范围之间），并且您尝试按住空格键匹配的时间。每次您抬起空格键进行试验时，都会进入下一个试验。首先倒计时 5 秒。这第一次有效，但是在抬起按键后，似乎过渡到下一次尝试的功能没有执行。输出记录了密钥持有情况，但没有倒计时，并且页面不会更新试验编号，或在边界内创建新的随机数。任何帮助将不胜感激！

我尝试过谷歌搜索并在论坛上查找，我能找到的最好的结果是该函数抛出一个：“index.html：92 Uncaught TypeError：无法设置 null 的属性（设置'textContent'）”错误，但我不这样做知道这是否是真正的原因，或者如何纠正它。

附注如果有人也能解释为什么按住 5-10 秒时记录的时间是 0.012 秒，那就太好了。但这是次要的。

let trialsLeft;
let lowerBound;
let upperBound;
let trialNumber = 1;
let csvContent = "data:text/csv;charset=utf-8,Trial,Duration\n";
let spacebarDownTime;
let spacebarUpTime;

/*
function startCountdown() {
    let countdownElement = document.getElementById('countdown');
    let count = 5;
    countdownElement.textContent = count;

    let timer = setInterval(() => {
        count--;
        countdownElement.textContent = count;

        if (count <= 0) {
            clearInterval(timer);
            displayRandomNumber();
        }
    }, 1000);
}
*/

function startCountdown() {
  let countdownElement = document.getElementById('countdown');
  let count = 5;
  countdownElement.textContent = 5;

  let timer = setInterval(() => {
    count--;
    countdownElement.textContent = count;

    if (count <= 0) {
      clearInterval(timer);
      displayRandomNumber();
    }
  }, 1000);
}

/*
function displayRandomNumber() {
    let randomNumber = Math.floor(Math.random() * (upperBound - lowerBound + 1)) + lowerBound;
    document.getElementById('page2').innerHTML = `  <h2>Trial number: ${trialNumber} </h2>
                                                    <h2>Number of seconds to hold the spacebar: ${randomNumber}</h2>
                                                    <p>Press and hold the spacebar to record the duration.</p>`;
    document.addEventListener('keydown', handleKeyDown);
}
*/
function displayRandomNumber() {
  document.getElementById('page2').style.display = 'block'; // Ensure page2 is displayed
  let randomNumber = Math.floor(Math.random() * (upperBound - lowerBound + 1)) + lowerBound;
  document.getElementById('page2').innerHTML = `
                <h2>Trial number: ${trialNumber}</h2>
                <h2>Number of seconds to hold the spacebar: ${randomNumber}</h2>
                <p>Press and hold the spacebar to record the duration.</p>
            `;

  document.addEventListener('keydown', handleKeyDown); // Add event listener
}

/*
function handleKeyDown(event) {
    if (event.key === ' ') {
        spacebarDownTime = new Date().getTime();
        document.addEventListener('keyup', handleKeyUp);
    }
}
*/
function handleKeyDown(event) {
  if (event.key === ' ') {
    spacebarDownTime = new Date().getTime(); // Record time of key press
    document.addEventListener('keyup', handleKeyUp); // Add keyup listener
  }
}

/*
function handleKeyUp(event) {
    document.removeEventListener('keydown', handleKeyDown);
    if (event.key === ' ') {
        spacebarUpTime = new Date().getTime();
        let duration = spacebarUpTime - spacebarDownTime;
        if (duration > 0) { // Only save duration if it's a positive value
            saveData(trialNumber, spacebarDownTime);
            saveData(trialNumber, spacebarUpTime);
        }
        nextTrial();
        document.removeEventListener('keyup', handleKeyUp);
    }
}
*/

function handleKeyUp(event) {
  if (event.key === ' ') {
    spacebarUpTime = new Date().getTime(); // Record time of key release
    let duration = spacebarUpTime - spacebarDownTime;
    if (duration > 0) {
      saveData(trialNumber, duration);
    }
    nextTrial(); // Move to the next trial
    document.removeEventListener('keyup', handleKeyUp); // Remove keyup listener
  }
}

function saveData(trialNumber, duration) {
  csvContent += `${trialNumber},${duration/1000} seconds.\n`;
}

/*
function nextTrial() {
    trialNumber++;
    if (trialNumber <= trialsLeft) {
        //displayCountdown();
        startCountdown();
    } else {
        displayExportButton();
    }
}
*/

function nextTrial() {
  trialNumber++;
  if (trialNumber <= trialsLeft) {
    displayCountdown(); // Correct function call to start countdown
  } else {
    displayExportButton(); // Show export options if trials are completed
  }
}

/*
function displayCountdown() {
    document.getElementById('page2').style.display = 'none';
    document.getElementById('page1').style.display = 'none';
    document.getElementById('countdown').textContent = '5';
    document.getElementById('page2').style.display = 'block';
    startCountdown();
}
*/

function displayCountdown() {
  document.getElementById('page1').style.display = 'none'; // Hide page1
  document.getElementById('page2').style.display = 'block'; // Ensure page2 is visible
  startCountdown(); // Initiate countdown
}

function displayExportButton() {
  document.getElementById('page1').style.display = 'none';
  document.getElementById('page2').style.display = 'none';
  document.getElementById('exportContainer').style.display = 'block';
}

function exportData() {
  const encodedUri = encodeURI(csvContent);
  const link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "key_press_data.csv");
  document.body.appendChild(link);
  link.click();
}

function resetPage() {
  location.reload(); // Reload the page to reset everything
}

document.getElementById('startButton').addEventListener('click', function() {
  trialsLeft = parseInt(document.getElementById('numTrials').value);
  lowerBound = parseInt(document.getElementById('lowerBound').value);
  upperBound = parseInt(document.getElementById('upperBound').value);

  if (isNaN(trialsLeft) || isNaN(lowerBound) || isNaN(upperBound)) {
    alert('Please enter valid numbers');
    return;
  }

  if (lowerBound >= upperBound) {
    alert('Upper bound must be greater than lower bound');
    return;
  }

  displayCountdown();
});

document.getElementById('exportBtn').addEventListener('click', exportData);
document.getElementById('resetBtn').addEventListener('click', resetPage);
body {
  font-family: Arial, sans-serif;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  text-align: center;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

#countdown {
  font-size: 24px;
  margin-bottom: 20px;
}
<div class="container">
  <div id="page1">
    <h2>Enter Details</h2>
    <label for="numTrials">Number of Trials:</label>
    <input type="number" id="numTrials" min="1" required>
    <br>
    <label for="lowerBound">Lower Bound Time (seconds):</label>
    <input type="number" id="lowerBound" min="1" required>
    <br>
    <label for="upperBound">Upper Bound Time (seconds):</label>
    <input type="number" id="upperBound" min="1" required>
    <br>
    <button id="startButton">Start</button>
  </div>

  <div id="page2" style="display: none;">
    <h2>Countdown</h2>
    <div id="countdown">5</div>
  </div>

  <div id="exportContainer" style="display: none;">
    <button id="exportBtn">Export Data</button>
    <br>
    <button id="resetBtn">Reset</button>
  </div>
</div>

javascript html
1个回答
0
投票

由于以下函数，第一次后会抛出错误：

function displayRandomNumber() {
    document.getElementById('page2').style.display = 'block'; // Ensure page2 is displayed
    let randomNumber = Math.floor(Math.random() * (upperBound - lowerBound + 1)) + lowerBound;
    document.getElementById('page2').innerHTML = `
        <h2>Trial number: ${trialNumber}</h2>
        <h2>Number of seconds to hold the spacebar: ${randomNumber}</h2>
        <p>Press and hold the spacebar to record the duration.</p>
    `;
    document.addEventListener('keydown', handleKeyDown); // Add event listener
}

当您重新定义 page2 的 

innerHTML
时，您会从页面中删除该元素 
<div id="countdown">5</div>
。因此，这一行：
let countdownElement = document.getElementById('countdown');
找不到任何元素和这一行：
countdownElement.textContent = 5;
抛出您所描述的错误：
index.html:92 Uncaught TypeError: Cannot set properties of null (setting 'textContent')

我不确定代码的其余部分是否正确，但修复此问题将引导您走向正确的方向。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.