TypeError：无法在事件监听器中读取event.target的undefined属性“ target”

问题描述

所以我有这个代码

我正在尝试将十六进制值记录到功能之外的控制台中。当我将console.log放在类似console.log(updatedColor);的函数中时，在函数关闭它之前起作用。

我得到的错误是：

Uncaught TypeError: Cannot read property 'target' of undefined
    at updateFirst1 (script.js:15)
    at script.js:21
updateFirst1    @   script.js:15
(anonymous)

第15行是chosenColor.style.backgroundColor = event.target.value;，第21行是控制台日志。

var colorSelect;

window.addEventListener("load",startup);

function startup() {
  colorSelect = document.querySelector("#color-picker");
  colorSelect.addEventListener("input",updateFirst1);
  colorSelect.select();
}

function updateFirst1(event) {
  var chosenColor = document.querySelector(".colored-box");

  if (chosenColor) {
    chosenColor.style.backgroundColor = event.target.value;
  }
  var updatedColor = event.target.value;
  return updatedColor;
}

console.log(updateFirst1());

#colored-box {
  width: 700px;
  height: 300px;
  border: 1px solid;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="colored-box" id="colored-box"></div>

  <label for="color-picker">Color:</label>
  <input type="color" value="#ff0000" id="color-picker">

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

</html>

解决方法

您只需要在选色时使用日志结果，因此只需在函数console.log中使用updateFirst1

代码：

var colorSelect;

window.addEventListener("load",startup);

function startup() {
  colorSelect = document.querySelector("#color-picker");
  colorSelect.addEventListener("input",updateFirst1);
  colorSelect.select();
}

function updateFirst1(event) {
  var chosenColor = document.querySelector(".colored-box");

  if (chosenColor) {
    chosenColor.style.backgroundColor = event.target.value;
  }
  var updatedColor = event.target.value; 
  
  console.log(updatedColor);
}

#colored-box {
  width: 700px;
  height: 300px;
  border: 1px solid;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="colored-box" id="colored-box"></div>

  <label for="color-picker">Color:</label>
  <input type="color" value="#ff0000" id="color-picker">

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

</html>

这里的问题是您在事件之外手动调用updateFirst函数，因此event对象是未定义的，并且会出现错误。当console.log()位于函数内部时，event的定义是从您在startup函数中添加的输入侦听器中调用的。

color-picker javascript

TypeError：无法在事件监听器中读取event.target的undefined属性“ target”

问题描述

解决方法

相关问答