Question

我有五张jpg图片，在主页上我想通过输入1,2,3,4或5来选择这五张照片，然后点击确定，然后我想要显示该图片。

我的代码如下所示：

var inputElem, msgElem;

function init() {
msgElem = document.getElementById("message");
    inputElem = [];
    inputElem[1] = document.getElementById("input1");
    inputElem[2] = document.getElementById("input2");
    inputElem[3] = document.getElementById("input3");
    document.getElementById("btn1").onclick = showFruit;

}

 window.onload = init; 

function showFruit() {
var nr, fruitUrl;

fruitUrl = (fruitImg.src = "pics/fruit" + nr + ".jpg");
nr = Number(input1.value);

fruitImg.src = "pics/fruit" + nr + ".jpg";

fruitUrl = document.getElementById("fruitImg").src = "pics/fruit1.jpg";

问题在于我无法改变图片。我不知道丢失了什么，或者如何在图1-5之间做出选择。

Answer 1

我没有权利撰写评论，因此无法估计您真正想要的内容。但结果可能是你想要的效果。

但请查看以下示例（live here）。输入一个数字，然后单击按钮。

<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>

<div id="image">
    <img src="salon1.jpg" id="fruit">
</div>
        <input type="number" id="inp">
        <input type="submit" id="btn1" onclick="showFruit('inp')">

<script type="text/javascript">

    makeImageFromNum = function (n) {
        var nr = document.getElementById(n).value;
        if (parseInt(nr)>5) {
            nr = 5;
        }
        else if (parseInt(nr)<1) {
            nr = 1;
        }
        return "salon"+nr+".jpg";
    }

    showFruit = function (n) {
        document.getElementById("fruit").src = makeImageFromNum(n);
    }

</script>
</body>
</html>

在下面的示例中（live here）只需更改数字 - 无需单击按钮，实际上没有任何内容：）

<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>

<div id="image">
    <img src="salon1.jpg" id="fruit">
</div>
        <input type="number" id="inp" onchange="showFruit(this.value)">

<script type="text/javascript">

    makeImageFromNum = function (nr) {
        if (parseInt(nr)>5) {
            nr = 5;
        }
        else if (parseInt(nr)<1) {
            nr = 1;
        }
        return "salon"+nr+".jpg";
    }

    showFruit = function (n) {
        document.getElementById("fruit").src = makeImageFromNum(n);
    }

</script>
</body>
</html>

Answer 2

请注意，您总是在这行代码中分配第一张图片（如果您的代码是最后一张Iine）

fruitUrl = document.getElementById("fruitImg").src = "pics/fruit1.jpg";

所以，你总能看到第一张图片

Javascript - 基本编程，无法更改图片

2 个答案: