Javascript Noob Question. Нужна помощь с простым скриптом

Я новичок в JavaScript (всего пару дней с книгой), и я застрял в этом фрагменте кода. Я смотрел на него снова и снова, но не могу понять, почему он не работает. Я уверен, что это что-то действительно простое, что я только что просмотрел, но мне действительно нужны свежие глаза, чтобы посмотреть на это.Javascript Noob Question. Нужна помощь с простым скриптом

Код должен обновлять изображение заполнителя на странице без необходимости перезагрузки страницы. Но когда я нажимаю ссылку на изображение, он ведет меня к ссылке, где находится изображение, вместо того, чтобы заменять образ заполнителя. Вот мой HTML код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Image Gallery</title> 
<script type="text/javascript" src="scripts/showPic.js"></script> 
</head> 
<body> 

    <h1>Snapshots</h1> 
    <ul> 
     <li> 
     <a href="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a> 
     </li> 
     <li> 
     <a href="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a> 
     </li> 
     <li> 
     <a href="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a> 
     </li> 
     <li> 
     <a href="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a> 
     </li> 
     <li> 
     <a href="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a> 
     </li> 
     <li> 
     <a href="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a> 
     </li> 
    </ul> 

    <br /> 

    <img id="placeholder" src="images/placeholder.jpg" alt="Place Holder Image" /> 

</body> 
</html>

А вот функция JavaScript Я использую, чтобы получить это сделано:

<script type="text/javascript"> 

function showPic(whichpic) { 
    var source = whichpic.getAttribute("href"); 
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source); 
} 

</script>

Любая помощь очень ценится и заранее спасибо за помощь.

источник

2010-04-18 three3

Дубликат http://stackoverflow.com/questions/2660623/need-help-with-this-simple-script-javascript-noob-question –

У вас есть две вещи, которые пытаются случиться, когда вы нажимаете на гиперссылок:

HREF навигации
OnClick обработчик события работает

Ваш return false; эффективно «останавливает» обработчик событий от делать что-нибудь еще, чтобы вы были там хороши. Однако сохранение адреса изображения в HREF, вероятно, является плохой идеей. Попробуйте что-нибудь подобное вместо этого:

<ul> 
    <li> 
    <a href="#" img="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a> 
    </li> 
    <li> 
    <a href="#" img="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a> 
    </li> 
    <li> 
    <a href="#" img="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a> 
    </li> 
    <li> 
    <a href="#" img="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a> 
    </li> 
    <li> 
    <a href="#" img="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a> 
    </li> 
    <li> 
    <a href="#" img="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a> 
    </li> 
</ul>

с вашим JavaScript functiong быть что-то вроде этого:

function showPic(whichpic) { 
    var source = whichpic.getAttribute("img"); 
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source); 
}

источник

2010-04-18 15:02:12 Jaxidian

Hey Jaxidian, я пробовал этот новый код, но теперь весь скрипт это просто обновление ссылки в строке url по адресу http://example.com/image_gallery.html#. Изображение, на которое я нажимаю, не отображается на его собственной странице или вместо изображения замещающего. Я очень ценю ответ. У вас есть другое решение? Еще раз спасибо. – three3

Тогда у вас есть другая проблема (возможно, неправильные пути к файлам). Это решение работает. См. Здесь: http://jaxidian.org/so.htm – Jaxidian

WTF является -1 для? Это рабочее решение ...: -/ – Jaxidian

пример выглядел как это должно работать.

Хотя, когда один получает неожиданный отправки формы или неожиданные следующие ссылки на этом пути (неожиданный, потому что ваши form «ы onsubmit или ваши a» ы onclick имеет в нем return false;), это часто связано с вашей Java-кода Подняв исключение, и return false; пропускается.

См:

<a href="www.example.com" onclick="alertOrFollow(this); return false;">alert or follow?</a> 
<script type="text/javascript"> 
    function alertOrFollow(elem) { 
     throw new Error('npup'); // try commenting this line out and things work as expected 
     alert(elem.href) 
    } 
</script>

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

источник

2010-04-18 15:44:51 npup

Javascript Noob Question. Нужна помощь с простым скриптом

ответ

Смежные вопросы