Изображение не загружается на HTML-странице при попытке изменить его с помощью метода GetElementByID
Я пытаюсь написать простую функцию на странице HTML, которая отображает изображение, и есть несколько кнопок, которые меняют изображение. Я использовал команду «document.getElementById('myImage').src=", чтобы изменить его, но нет изображение отображается после того, как я нажимаю на него. То же изображение загружается правильно с использованием тега. Та же кнопка работает, если я использую прямую ссылку, взятую из Google. Ниже я вставил код. Любые предложения приветствуются.
<!IDOCTYPE HTML>
<html>
<body>
<h2> This page shows changing emotions using various buttons </h2>
<img id = "image" src = "path\angry.jpg" style = "width:100px">
<button onclick = 'document.getElementById("image").src = "path\envy.jpg"'>Envy</button>
<button onclick = 'document.getElementById("image").src = "path\angry.jpg"'>Angry</button>
<button onclick = 'document.getElementById("image").src = "path\sad.jpg"'>Sad</button>
<button onclick = 'document.getElementById("image").src = "path\embarassed.jpg"'>Embarassed</button>
<button onclick = 'document.getElementById("image").src = "path\happy.jpg"'>Happy</button>
<button onclick = 'document.getElementById("image").src = "path\anxiety.jpg"'>Anxiety</button>
</body>
</html>
Пробовал ссылки из Google, работают, но локальные изображения не работают в функции нажатия. Спасибо!
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
56
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Проблема, с которой вы столкнулись, скорее всего, связана с обратными косыми чертами (), используемыми в путях к файлам. В HTML и JavaScript пути к файлам должны использовать косую черту (/). Обратная косая черта не является допустимым разделителем путей в URL-адресах.
<!DOCTYPE HTML>
<html>
<body>
<h2> This page shows changing emotions using various buttons </h2>
<img id = "image" src = "path/angry.jpg" style = "width:100px">
<button onclick='document.getElementById("image").src = "path/envy.jpg"'>Envy</button>
<button onclick='document.getElementById("image").src = "path/angry.jpg"'>Angry</button>
<button onclick='document.getElementById("image").src = "path/sad.jpg"'>Sad</button>
<button onclick='document.getElementById("image").src = "path/embarrassed.jpg"'>Embarrassed</button>
<button onclick='document.getElementById("image").src = "path/happy.jpg"'>Happy</button>
<button onclick='document.getElementById("image").src = "path/anxiety.jpg"'>Anxiety</button>
</body>
</html>
Не используйте встроенные обработчики событий. Подробности прокомментированы в примере.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title></title>
<style>
img {
display: block;
width: 300px;
height: 300px;
margin: 20px auto;
cursor: pointer
}
</style>
</head>
<body>
<img src = "https://i.ibb.co/bBGX3Sq/static.gif">
<script>
// Assign a counter outside of function
let i = 0;
// Have the URLs of the the images in an array
const pix = [
"https://i.ibb.co/c1PtcM7/matrix1.gif",
"https://i.ibb.co/FHRS8Gx/stars.gif",
"https://i.ibb.co/bBGX3Sq/static.gif"
];
// This is the callback function that will be invoked at every click
function changeSrc(e) {
// Increment the counter
i++;
// If the count equals to or exceeds the number of URLs in pix array...
if (i >= pix.length) {
// Reset the counter back to 0
i = 0;
}
// Change the src of the <img> to the URL at the index of "i" in array pix
this.src = pix[i];
}
document.querySelector("img").onclick = changeSrc;
</script>
</body>
</html>Другие вопросы по теме
Как сделать так, чтобы фрагмент одновременно появлялся и выделялся красным?
CSS липкие карты с использованием сетки
<aside> или <section>: какой из них следует использовать для раздела библиографии/ссылки?
Создание пользовательского выбора во время выполнения
Как вставить разрыв строки в ::before элемента с помощью CSS и attr()
В UserCreationForm Django отображается только первый заполнитель
Что моя кнопка не отображается одинаково в разных браузерах?
Странное поведение бесконечной карусели при движении быстрее
Как я могу выровнять логотип в заголовке навигационной панели блестящего приложения R, созданного с помощью bslib?
Мой веб-сайт React работает на сервере разработки, но не на реальном веб-сайте. Где мне искать причину?
Похожие вопросы
Как обновлять модель (данных), связанную с формой, при каждом изменении данных формы?
Как сделать так, чтобы фрагмент одновременно появлялся и выделялся красным?
Как исправить мою модальную галерею и как улучшить последующие изображения
CodeIgniter и Ajax: динамически зависимый раскрывающийся список не работает
Очистка таблицы с веб-страницы
Asp net core вызывает ошибку Fetch: TypeError
Перенаправление на другую страницу после отправки формы ASP NET
Почему обработка частных полей не работает ожидаемым образом в JavaScript?
Создание пользовательского выбора во время выполнения
Как проверить, отключены ли кнопки формы при нажатии кнопки отправки в Playwright
Пробовали ли вы использовать пути с «/» вместо «\"?