Question

当我从 DOM 中选择变量时，是什么导致它的值为 null

2020-06-03

468

javascript html dom javascript-objects dom-selection

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

Uncaught TypeError: Cannot set property 'innerHTML' of null Checking in the browser console to check what the issue is, I found out the logic I was using in dynamically selecting my elements was what was causing the trouble but when I use the same logic to pick up the element, it works well... Can I please get an explanation of why I am getting this behaviour...

以下是代码片段

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>

Answer 1

您只需在 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);
});

Answer 2

错误在这里：

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');

Answer 3

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

MeowBlock

2020-06-03