Can't add 属性 to object (Cannot set 属性 of undefined)

Can't add property to object (Cannot set property of undefined)

我在向对象添加属性时遇到问题。我想要它,当您单击“喜欢”时,它会在 "scores" 对象内创建一个新的 属性,然后将该值递增 1。但是我在执行此操作时遇到此错误:

Uncaught TypeError: Cannot set property '(hex-code)' of undefined

HTML

<p style="display: inline;">Hex-code: </p>
<input id="demo" type="text">
<button onclick="generate()">Generate</button>

<div id="showcase" style="background: #FFF; width: 200px; height: 200px; margin: 20px; border-radius: 3px;"></div>

<button onclick="like()">Like</button>
<button onclick="dislike()">Dislike</button>

JAVASCRIPT

var result = document.getElementById('demo').innerHTML;
var hex;

var scores = {}

function generate () {
    var length = 3,
        charset = "ABCDEF0123456789",
        retVal = "";
    for (var i = 0, n = charset.length; i < length; ++i) {
        retVal += charset.charAt(Math.floor(Math.random() * n));
    }
    finalVal = "#" + retVal;
    document.getElementById('demo').value = finalVal;
    document.getElementById('showcase').style.backgroundColor = finalVal;
    return hex = retVal;
}

function like () {
    scores[hex] = 0;
    scores[hex] += 1;
    return generate();
}

Link 至 fiddle:https://jsfiddle.net/elliotsoomro/o0kuwc0d/4/

您已将脚本包含在 html 的 <head> 中,但未将其包装在 window.onload 中。这将使这条线失败

var result = document.getElementById('demo').innerHTML;

因为在运行时找不到该元素,这进一步导致 score 由于上述中断错误而从未定义。

请参阅 this updated fiddle,工作脚本包含在 html 的 <body> 中。或者,您可以将代码的第一部分包装在 window.onload = function() {} 中,或者将

var result = document.getElementById('demo').innerHTML;

在你的 generate() 函数中。