0

我正在尝试操作我的 HTML 元素。我正在尝试使用 dom 选择器来更改页面上元素的值，但我不断收到

Uncaught TypeError: Cannot set property 'innerHTML' of null 检查浏览器控制台以检查问题所在，我发现我在动态选择元素时使用的逻辑是导致问题的原因，但是当我使用相同的逻辑时拿起元素，它运作良好......我能否解释一下我为什么会出现这种行为......

下面是一个片段

let timerObj = {
  minutes: 0,
  seconds: 0,
  timerId: 0
}

const soundAlarm = () => {
  let amount = 3;
  let audio = new Audio('Timer_Sound_Effect.mp3');

  const playSound = () => {
    audio.pause();
    audio.currentTime = 0;
    audio.play();
  }

  for (let i = 0; i < amount; i++) {
    setTimeout(playSound, 1200 * i);
  }
}

const updateValue = ((key, value) => {
  if (value < 0) value = 0;
  console.log('Positive Numbers');

  if (key === 'seconds') {
    if (value < 10) value = '0' + value;
  }

  let keySelect = document.getElementById(key);

  keySelect.innerHTML = value || 0
  timerObj[key] = value;
  console.log(keySelect);
  console.log('mins', timerObj.minutes);
  console.log('secs', timerObj.seconds);
})


(function detectChanges(key) {
  console.log('detectChanges');

  let input = document.getElementById(`${key}-input`);

  input.addEventListener('change', () => {
    updateValue(key, input.value);
  })

  input.addEventListener('keyup', () => {
    updateValue(key, input.value);
  })
  return arguments.callee;
})('minutes')('seconds');
body, input, button {
  font-family: 'Montserrat', sans-serif;
}

body {
  margin: 72px 140px 0;
}

#header {
  font-weight: 800;
  font-size: 74px;
}

#controls {
  display: inline-block;
  width: 46%;
  border-right: 1px solid rgba(0, 0, 0, .5);
  padding-right: 42px;
  padding-bottom: 42px;
}

.input-group {
  margin: 26px 0;
}

label {
  display: inline-block;
  width: 24%;
  font-weight: 200;
  font-size: 30px;
  padding: 12px;
}

input {
  width: 60%;
  font-size: 30px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, .5);
  padding-left: 6px;
  font-weight: 200;
  outline: none;
}

input:disabled {
  background-color: white;
  opacity: .6;
}

button {
  color: white;
  border: none;
  outline: none;
  padding: 12px 62px;
  background-color: #222;
}

button:disabled {
  opacity: .2;
}

button:hover {
  opacity: .5;
}

h2 {
  display: inline-block;
  vertical-align: top;
  font-weight: 200;
  font-size: 144px;
  margin: 12px 0;
  padding-left: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;800&display=swap" rel="stylesheet">
  <title>Clockworks</title>
</head>
<body>
  <h1 id="header">Clockworks</h1>

  <section id="controls">
    <div class="input-group">
      <label for="minutes-input">Minutes</label>
      <input type="number" id="minutes-input" placeholder="0" max="480" min="0">
    </div>

    <div class="input-group">
      <label for="seconds-input">Seconds</label>
      <input type="number" id="seconds-input" placeholder="0" max="59" min="0" step="5">
    </div>

    <button type="button" id="start-btn">Start</button>
    <button type="button" id="pause-btn" disabled>Pause</button>
    <button type="button" id="stop-btn" disabled>Stop</button>
  </section>

  <h2><span id="minutes">0</span> : <span id="seconds">00</span></h2>

  <script src="main.js"></script>
</body>
</html>

4

3 回答 3

0

错误在这里：

document.getElementById(key)

应该清楚，因为那是您分配 keySelect 的元素

将其更改为document.getElementBy(${key}-input)

由于格式化，我不得不删除反引号，所以记得重新添加它们

或更改 detectChanges 函数

(function detectChanges(key) {
  console.log('detectChanges');
  const modified = key + "-input";

  let input = document.getElementById(modified);

  input.addEventListener('change', () => {
    updateValue(modified, input.value);
  })

  input.addEventListener('keyup', () => {
    updateValue(modified, input.value);
  })
  return arguments.callee;
})('minutes')('seconds');
于 2020-06-03T13:59:10.797 回答
0

您只需在 updateValue 函数中添加分号

const updateValue = ((key, value) => {
    if (value < 0) value = 0;
    console.log('Positive Numbers');

    if (key === 'seconds') {
        if (value < 10) value = '0' + value;
    }

    let keySelect = document.getElementById(key);

    keySelect.innerHTML = value || 0
    timerObj[key] = value;
    console.log(keySelect);
    console.log('mins', timerObj.minutes);
    console.log('secs', timerObj.seconds);
});

于 2020-06-03T14:03:38.267 回答
-1

您是否检查过设置key时的值keySelect？

于 2020-06-03T13:56:50.060 回答