Javascript-基本编程，可以´不要改变图片

Javascript - basic programing, can´t change picture

本文关键字：改变 #180 编程 可以 Javascript-      更新时间：2024-03-30

我有五张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中做出选择。

我没有写评论的权限，所以无法估计您实际想要的内容。但最终的效果可能是你想要的。

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

<!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>

在下面的例子中（住在这里）只需更改数字-不需要点击按钮，实际上没有任何：）

<!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>

请注意，您总是将这行代码中的第一个图像（如果您的代码是最后一行）放入

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

因此，您将始终看到图像一

相关文章：