【发布时间】:2021-11-04 19:41:33
【问题描述】:
我们有一切正常的常用示例代码。
(myFunction 在 onclick 事件上触发。)
"use strict";
console.clear();
const obj = {
name: "falana",
count: 0
};
function myFunction() {
obj.count++;
console.log(obj.count);
console.log(obj.name);
console.log(obj);
}
---输出---
1
"falana"
// [object Object]
{
"name": "falana",
"count": 1
}
从这个例子中,我们可以在没有任何ReferenceError的情况下访问另一个函数(在本例中为myFunction)内的全局对象obj。
我试图创建单个页面 Twitter clone(仅 DOM 操作)并不断收到此错误。
Uncaught ReferenceError: Cannot access 'userData' before initialization at postMessage
---导致错误的Javascript---
window.onload = function() {
console.clear();
}
const userData = {
username: 'Chinmay Ghule',
userhandle: generateUserhandle(this.username),
userPostCount: 0
};
function generateUserhandle(userData) {
const usernameArr = userData.username.split(" ");
usernameArr.forEach(element => {
element.toLowerCase();
});
return "@" + usernameArr.join("");
}
// posts message entered in #message-text to
// message-output-container.
function postMessage() {
console.log(userData);
// get message from #message-text.
const message = document.getElementById('message-text').value;
console.log(`message: ${message}`);
// check for length.
console.log(`message length: ${message.length}`);
if (message.length === 0) {
return;
}
// create new div.
const card = document.createElement('div');
const userInfo = document.createElement('div');
const userMessage = document.createElement('div');
const usernameSpan = document.createElement('span');
const userhandleSpan = document.createElement('span');
const beforeTimeDotSpan = document.createElement('span');
const timeSpan = document.createElement('span');
usernameSpan.classList.add('username');
userhandleSpan.classList.add('userhandle');
beforeTimeDotSpan.classList.add('before-time-dot');
timeSpan.classList.add('time');
userInfo.appendChild(usernameSpan);
userInfo.appendChild(userhandleSpan);
userInfo.appendChild(beforeTimeDotSpan);
userInfo.appendChild(timeSpan);
console.log(`userInfo : ${userInfo}`);
userInfo.classList.add('user-info');
userMessage.classList.add('output-message');
card.appendChild(userInfo);
card.appendChild(userMessage);
console.log(`card : ${card}`);
card.classList.add('output-message');
userMessage.innerText = message;
// check for number of posts.
if (userData.userPostCount === 0) {
let noMessageDiv = document.getElementById("no-message-display");
noMessageDiv.remove();
}
// append new div.
const messageOutputContainer = document.getElementById('message-output-container');
messageOutputContainer.appendChild(card);
// increment userPostCount.
userData.userPostCount++;
}
为什么在这种情况下我会得到这个ReferenceError,而在我们的第一个示例代码中却没有?
【问题讨论】:
-
请将无效代码放入您的问题中,而不是依赖外部链接
-
那么为什么我们没有看到导致此错误的代码?
-
错误信息对我来说似乎很清楚:您正试图在变量被赋值之前访问它。
-
我已经编辑了问题。
标签: javascript onclick referenceerror