Как использовать функцию переключения (clickCount), чтобы изменить несколько изображений, а затем изменить URL - PullRequest
0 голосов
/ 25 ноября 2018

Я пытаюсь найти способ несколько раз изменить изображение, а затем перейти к новому URL;все, нажав одну и ту же кнопку.Я играл с функцией switch (clickCount), которая, кажется, является лучшим решением из того, что предложили другие люди, и из того, что я читал в другом месте.

Однако я никогда не использовал нипереключатель или clickCount раньше, и я не могу заставить код работать, несмотря на чтение / просмотр нескольких учебников.Но я понятия не имею, почему (я почти уверен, что что-то совершенно очевидно, что мои ограниченные знания не обнаруживаются), и я застрял в этом вопросе уже неделю, так что больше ничего не имеет смысла!

Код, который у меня есть ...

HTML:

<body>
<div id="wrapper" div class="toshow">
    <img src="infoscreenarrows.jpg" alt="Title" />
    <img src="infoscreentext.png" id="infoscreentext" alt="" />
</div>

<div id="enterbutton">
    <input type=image id=multiclick img src="silvercogarrow.png" alt="Enter" >
</div>
</body>

JS:

<script>
var clickCount = 0;

function clickHandler () {
    clickCount += 1;
    switch (clickCount) {
    case 1:
        var image = document.getElementById("infoscreentext");
        image.src="infoscreentext2.png";
        // 1st click on SilverCogArrow changes image infoscreentext to infoscreentext2
    break;
    case 2:
        var image = document.getElementById("infoscreentext");
        image.src="infoscreentext3.png";
        // 2nd click on SilverCogArrow changes image infoscreentext2 to infoscreentext3
    break;
    case 3:
        window.location.href = "castleview.html";
        // 3rd click on SilverCogArrow changes page to castleview.html
break;
  }
}
</script>

1 Ответ

0 голосов
/ 25 ноября 2018
  1. тип ввода = изображение является кнопкой отправки
  2. вы не присоединяете clickHandler к кнопке

Попробуйте

<button type="button" onclick="clickHandler()"><img 
src="silvercogarrow.png" alt="Enter" /></button>
...