点击按钮时根据输入值向middleCell插入图片的问题求助

核心错误修正 #

• 属性名拼写错误：代码中所有的innerHtml均为错误写法，正确的DOM属性名是innerHTML（注意字母H为大写），这是导致内容无法更新的直接原因。
• 输入值类型处理：input元素的value返回的是字符串类型，直接与数字比较可能出现意外行为，需转换为数值类型后再进行判断。

修正后的完整代码 #

HTML代码 #

<table border="1">
    <tr>
        <td>
            <input id="input1">
            <button id="leftButton" onclick="fruitTest();">Enter</button>
        </td>
        <td>
            <p id="middleCell">Hello</p>
        </td>
        <td>
            <button id="clearButton" onclick="clearBox();">Clear</button>   
        </td>
    </tr>
</table>

JavaScript代码 #

var appleImg = "<img src='https://codehs.com/uploads/afcd3bf7ea7baf3f7d571c6e24c352af'>";
var pearImg = "<img src='https://codehs.com/uploads/e0c442f8c020685fc8016f15c2547f1e'>";

var middleCell = document.getElementById("middleCell");
function fruitTest(){
    var myInput = document.getElementById("input1");
    // 将输入值转换为数值类型
    var inputValue = Number(myInput.value);
    if (inputValue > 100){
        middleCell.innerHTML = appleImg;
    } else if (inputValue < 0){
        middleCell.innerHTML = pearImg;
    }
} 
function clearBox (){
    middleCell.innerHTML = "";
}

额外优化建议 #

可增加对非数值输入的处理，避免无效输入导致逻辑异常：

function fruitTest(){
    var myInput = document.getElementById("input1");
    var inputValue = Number(myInput.value);
    // 判断是否为有效数字
    if (isNaN(inputValue)) {
        middleCell.innerHTML = "请输入有效数字";
        return;
    }
    if (inputValue > 100){
        middleCell.innerHTML = appleImg;
    } else if (inputValue < 0){
        middleCell.innerHTML = pearImg;
    } else {
        // 输入值在0-100区间时的处理，示例为清空内容
        middleCell.innerHTML = "";
    }
}

内容的提问来源于stack exchange，提问作者user9330339