有没有办法同时完成这两个功能？答案

【问题标题】：Is there a way to do both this functions at once?有没有办法同时完成这两个功能？
【发布时间】：2021-03-24 16:38:46
【问题描述】：

我为主题公园制作了动画。我的目标是让用户决定他们想要的门票总数。例如，如果他们选择了带有“两人”的按钮，则两辆手推车穿过屏幕。然后会出现一个隐藏按钮，将他们重定向到一个新的 html 页面，他们可以在其中支付两张票。 Here is the html page I have at the moment.

首先，这是我的 html 文件：

<!DOCTYPE html>
<html>
<head>
    <title>Beginscene</title>
</head>
<link rel="stylesheet" type="text/css" href="./css/karretjestest.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<body>

<img id="rideeen" src="C:\Users\marin\Documents\avans\leerjaar2\Blok 7\PROG\ride.png">

<div class="allebuttons">
  <button class="buttons" TYPE="BUTTON" id="editeen" onclick="changeImage();"><div class="myDIV">1 person</div></button>
    <div><a href="C:\Users\marin\Documents\avans\leerjaar2\Blok 7\PROG\uitwerking\eenpersoon.html"><INPUT class="buttons" TYPE="BUTTON" id="saveeen"></a></div>


    <button class="buttons" TYPE="BUTTON" id="edittwee" onclick="changeImagetwee();"><div class="myDIV">2 persons</div></button>
    <div><a href="C:\Users\marin\Documents\avans\leerjaar2\Blok 7\PROG\uitwerking\tweepersonen.html"><INPUT class="buttons" TYPE="BUTTON" id="savetwee"></a></div>


    <button class="buttons" TYPE="BUTTON" id="editdrie" onclick="changeImagedrie();"><div class="myDIV">3 persons</div></button>
    <div><a href="C:\Users\marin\Documents\avans\leerjaar2\Blok 7\PROG\uitwerking\driepersonen.html"><INPUT class="buttons" TYPE="BUTTON" id="savedrie"></a></div>


    <button class="buttons" TYPE="BUTTON" id="editvier" onclick="changeImagevier();"><div class="myDIV">4 persons</div></button>
    <div><a href="C:\Users\marin\Documents\avans\leerjaar2\Blok 7\PROG\uitwerking\vierpersonen.html"><INPUT class="buttons" TYPE="BUTTON" id="savevier"></a></div>

    </div>


<script src="js/attractie.js"></script>
<script src="js/buttons.js"></script>
</body>
</html>

现在我有两个不同的 Javascript 文件。第一个包含以下内容：

function changeImage()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ride.png";
return false;
}

function changeImagetwee()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ridetwee.png";
return false;
}

function changeImagedrie()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ridedrie.png";
return false;
}

function changeImagevier()
{
var img = document.getElementById("rideeen");
img.src="C:/Users/marin/Documents/avans/leerjaar2/Blok 7/PROG/ridevier.png";
return false;
}

第二个文件如下所示：

var editeen = document.getElementById("editeen");
var saveeen = document.getElementById("saveeen");
var edittwee = document.getElementById("edittwee");
var savetwee = document.getElementById("savetwee");
var editdrie = document.getElementById("editdrie");
var savedrie = document.getElementById("savedrie");
var editvier = document.getElementById("editvier");
var savevier = document.getElementById("savevier");

editeen.onclick = function() {
    saveeen.style.visibility = "visible";

}
edittwee.onclick = function() {
    savetwee.style.visibility = "visible";

  }
  editdrie.onclick = function() {
      savedrie.style.visibility = "visible";

    }

    editvier.onclick = function() {
        savevier.style.visibility = "visible";

      }

我遇到的问题似乎只有两种选择： 1：当点击带有文字的按钮时，游乐设施正在更改为其他数量的游乐设施，但隐藏的按钮不起作用。 2：当点击带有文字的按钮时，骑行不会改变，但隐藏的按钮会起作用。

有人对此有解决方案吗？感谢所有帮助！

【问题讨论】：

标签： javascript html css animation css-animations

【解决方案1】：

如果您想更改图像的来源，请显示链接按钮，它将如下所示

var double = document.getElementById("editeen");
var img = document.getElementById("rideeen");
var inp = document.getElementById("saveeen");
double.addEventListener("click", function () { 
    img.src = "/path/image.png";
    inp.style.visibility = "visible";
});

或者您可以直接发送它们，而无需按位置单击其他按钮

var double = document.getElementById("editeen");
var img = document.getElementById("rideeen");
var inp = document.getElementById("saveeen");
double.addEventListener("click", function () { 
    img.src = "/path/image.png";
    window.location.href = "https://example.com/";
});

【讨论】：