JavaScript / HTML изменение изображения при клике

0

В настоящее время я создаю веб-сайт как часть своего курса по ИТ, и я немного смущен, почему что-то не работает. У меня это получилось, когда пользователь нажимает на заголовок курса, появляется текст, предоставляющий больше информации, но мне также хотелось бы, чтобы изображение менялось, когда они нажимали, чтобы было немного легче понять. Вот код JavaScript:

    <script language="javascript">
function changeImage()
{
    if (document.getElementById("imgClickAndChange").src=="C:\Users\James\Documents\School\College\BTEC Level 3 in Computing\Unit 28 - Web Production - Zoe\Website\images\hiddenTab.jpg") 
     {
         document.getElementById("imgClickAndChange").src=="C:\Users\James\Documents\School\College\BTEC Level 3 in Computing\Unit 28 - Web Production - Zoe\Website\images\openTab.jpg";
         } 
         else
         {
             document.getElementById("imgClickAndChange").src=="C:\Users\James\Documents\School\College\BTEC Level 3 in Computing\Unit 28 - Web Production - Zoe\Website\images\hiddenTab.jpg";
        }
    }
  </script>

и соответствующий бит HTML:

    <img alt="" src="images/hiddenTab.jpg"style="height:22px; width:22px;" id="imgClickAndChange" onclick="changeImage()"/></p>

Любые идеи относительно того, почему он не работает? Заранее спасибо.

EDIT: Правильно, теперь он работает, за исключением того, что когда я нажимаю изображение, чтобы свернуть текст, изображение не возвращается обратно к hiddenTab.jpg. Любые идеи относительно того, почему он это делает?

  • 1
    О, пожалуйста, не используйте источники изображений с такими путями! Поместите изображение в корень вашего сайта и отсылайте его оттуда. Я готов поспорить, что это не соответствует условию if
  • 0
    Вы смотрели, чтобы увидеть, есть ли какие-либо ошибки JavaScript в веб-консоли? Кроме того, по какой-либо причине вы не используете веб-сервер для обслуживания страницы? Все становится странно, когда вы открываете и обслуживаете локальный файл. Попробуйте скачать xampp, так как я вижу, что вы находитесь на Windows
Показать ещё 1 комментарий
Теги:
image

5 ответов

2

Вы используете == (тестирование, если оно равно), а не = (присвоение значения переменной) внутри операторов if и else.

PS: вы должны изменить источник пути, ваше решение не так твердо сейчас

Поделиться
  • 0
    Теперь он работает, за исключением того, что когда я нажимаю, чтобы свернуть текст, изображение не меняется обратно. Есть идеи?
1

вы использовали "==" вместо "=", первым является логическое условие, а второе фактически устанавливает его

Поделиться
0

Надеюсь, это поможет.

Этот document.getElementById("imgClickAndChange").src возвращает полный путь с вашим доменным именем. Поэтому компиляция его с помощью ваших "images/openTab.png" никогда не возвращает true

.getAttribute("src") возвращает точное значение вашего значения атрибута src

Также вы используете == при назначении значений. в то время как == используется для сравнения и = используется для назначения.

 <script language="javascript">
     function changeImage() {
         if (document.getElementById("imgClickAndChange").getAttribute("src") == "images/hiddenTab.png") {
             document.getElementById("imgClickAndChange").src = "images/openTab.png";
         }
         else {
             document.getElementById("imgClickAndChange").src = "images/hiddenTab.png";
         }
     }
  </script>
Поделиться
0

В HTML вы используете относительный путь и в абсолютных путях JS.

function changeImage()
{
    if (document.getElementById("imgClickAndChange").src === "images\hiddenTab.jpg") 
     {
         // here you use "=" and not "=="
         document.getElementById("imgClickAndChange").src = "images\openTab.jpg";
     } 
     else
     {
         document.getElementById("imgClickAndChange").src = "images\hiddenTab.jpg";
     }
}
Поделиться
  • 1
    Обратная косая черта, вероятно, не будет работать так хорошо. Также было бы плохо, если бы кто-то из них начинал с a , f , n , r , t , v , b , u , x или 0 .
0

Это будет работать только на вашем локальном компьютере, даже если это правильно. Абсолютный путь будет работать только на компьютере, если на этом компьютере есть структура каталогов и файл. Относительный путь будет интерпретироваться веб-сервером соответственно и будет представлен конечному пользователю вместе с документом.

Также, если вы используете полный путь как условие, это не произойдет, и вы перейдете к другому.

Когда вы присваиваете значение свойства, вы должны использовать =, и когда вы сравниваете 2 значения, вы должны использовать ==

Более приятная версия вашего кода будет:

<script language="javascript">
function changeImage()
{
if (document.getElementById("imgClickAndChange").src=="images/hiddenTab.jpg") 
     {
     document.getElementById("imgClickAndChange").src="images/openTab.jpg";
     } 
 else
     {
     document.getElementById("imgClickAndChange").src="images/hiddenTab.jpg";
     }
 }
</script>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню