Question

我试图编写一个函数，它将div的内容更改为“太短” - 当输入太短的输入时，替换字符串将在以后更改;但是，一旦更新，页面上的div内容就不会改变。我通过“警告”验证它实际上已经改变了，警报改变了div的新内容，但div没有明显改变并保持不变。以下是代码摘录。

使用Javascript：

<script>
    var x = document.getElementById('xxx').innerHTML;
    function xxxx(xx) {
        if (xx.value.length < 6) {
            x="Too Short";
            alert(x)
        }
    }
</script>

HTML

<input onBlur="xxxx(this)" placeholder="*****"><div id="xxx">
</div></div>

Answer 1

您需要将值设置为innerHTML - 属性：

x="Too Short";
alert(x)

必须是：

x.innerHTML = "Too Short";
alert(x.innerHTML);

这是因为x包含DOM元素，您不应该覆盖它。

您应该只更改其属性，例如：innerHTML或style.color，依此类推..

Answer 2

您的代码应如下所示：

<script>
    var x = document.getElementById('xxx'); // need to get element, not its innerHTML
    function xxxx(xx) {
        if (xx.value.length < 6) {
            x.innerHTML = "Too Short"; // set innerHTML of element to change its content
            alert(x.innerHTML); // show HTML of x element in modal window
        }
    }
</script>

Div内容不会更新 - 简单的Javascript

2 个答案: