HTML: Как изменить содержимое таблицы с помощью document.getElementByID?

Я довольно новичок в том, чтобы быть веб-мастером, и мне было интересно, можно ли динамически изменить img src, нажав кнопку в html.HTML: Как изменить содержимое таблицы с помощью document.getElementByID?

Теоретическая цель: Есть 4 кнопки на моей веб-странице, каждая кнопка меняет содержимое на странице, используя три функции:

Места, чтобы изменить заголовок
Места, чтобы изменить пункты
предназначенный для замены стола

Я внедряю код в сайт Weebly, так как это веб-хостинг, который выбрал наш предыдущий веб-мастер. Так что это может быть даже невозможно, учитывая, насколько ограниченный Weebly.

Вы можете увидеть мои текущие и будущие версии кода: HERE.

Укороченная версия может быть расположена: HERE.

Я читал, что для изображений я должен использовать document.getElementById("").src, но мне не повезло. Мне удалось обновить заголовки и абзацы, так что это не так уж плохо. Я просто ничего не могу обновить в своей таблице. Все, что находится за пределами таблицы, может быть обновлено.

Я также попытался переместить ID: "R1C1" во все дочерние и родительские метки отдельно, пока не дойду до корневого тега.

Любые предложения?

источник

2015-06-03 WebApprentice

Использование Weebly может быть немного сложной задачей, поскольку любой пользовательский код, который вы используете, может быть перезаписан при следующей публикации. Когда у вас есть решение, которое работает, оно должно находиться во внешнем файле javascript, а в заголовке ссылаться/включать этот файл javascript. –

Я бы также рекомендовал использовать jquery для этого, а не document.getElementById() –

'document.getElementById (" R1C1 ")' получит вас 'td', а не' image' – lshettyl

Не знаком с Weebly, поэтому это может не распространяться.

Тег изображения, который вы хотите изменить, должен иметь атрибут id. Затем используйте document.getElementById, чтобы выбрать этот тег изображения, и после этого измените src.

document.getElementById('btnChangeImage').addEventListener('click', changeImage); 
 

 
function changeImage(){ 
 
    var img = document.getElementById('imgChangeMe'); 
 
    img.src = 'http://placehold.it/200x50'; 
 
}

<button id="btnChangeImage">Change Image</button> 
 

 
<table> 
 
    <tr> 
 
    <td>Doesn't matter where this image is, you can select it by the ID</td> 
 
    <td><img id="imgChangeMe" src="http://placehold.it/350x150" /></td> 
 
    </tr> 
 
</table>

источник

2015-06-03 15:23:01

Я поместил его в тег изображения, и действие все еще не сработало. (Пожалуйста, см. Мое упоминание о размещении идентификатора во всех дочерних и родительских тегах отдельно). Когда я попытался поместить его в тег изображения, я увидел те же результаты, даже после публикации. – WebApprentice

@Jon Hargett - хороший код. WebApprentice, это сработало для меня (вы получаете какие-либо ошибки?). Возможно, вы захотите сделать источник просмотра, поскольку старый/предыдущий код может быть кэширован в вашем браузере. –

@Adam T, у меня не было никаких ошибок, с которыми я в порядке. Оказывается, у редактора Weebly есть проблемы с интерпретацией кода. Я перезагрузил код из лучшего соединения, и он работал безупречно. – WebApprentice

Хорошо, так что я был в состоянии решить эту проблему. Это не было проблемой для кода, это была проблема с попыткой Weebly обработать код. Как многие из вас упомянули, размещение идентификатора в теге изображения является обязательным, как я надеялся и пытался раньше. Так это будет выглядеть следующим образом

<img id="R1C1" src="http://www.convertingsystems.com/uploads/2/6/8/5/26859557/6414565.jpg?222" alt="3001 Dual Turret Blown Film Winder" style="max-height:100%; max-width:100%"/>

Я могу вставить код 5 раз в редакторе Weebly и получить 5 различных результатов. Я поехал домой, где у меня было гораздо более быстрое и надежное соединение, перепродан мой код, и он сработал. Спасибо за все ответы.

источник

2015-06-03 15:34:10 WebApprentice

HTML: Как изменить содержимое таблицы с помощью document.getElementByID?

ответ

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