Выделение разделов текста на кнопке

Question

Это мой первый раз, когда я пишу HTML/Javascript. У меня есть несколько кнопок, и при нажатии они меняют изображение - все в порядке.

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

Я играл с операторами if, но я не могу заставить его работать.

Это то, что я до сих пор:

<button class="rbutton" onclick="R1Change()" style="position:absolute; Left:47.1%; Top: 70.7%; z-index: +1"></Button> 

function R1Change() { 
    var img = document.getElementById("image"); 
    img.src="S1.png"; 
    return false; 
} 

Любые советы?

Answer 1

Что бы я сделал, это просто изменить фоновый цвет текстового описания на цвет, который вы хотите выделить. Должно быть что-то вроде (основывая свой комментарий с кодом):

<button class="rbutton" onclick= "R1Change()"Style="position:absolute; Left:47.1%; Top: 70.7%; z-index: +1"></Button> 

-

function R1Change() { 
var img = document.getElementById("image"); 
var description = document.getElementById("description"); 
description.style.backgroundColor = 'yellow'; 
img.src="S1.png"; 
return false; 
} 

Answer 2

Вот простой пример ванильным JavaScript (не JQuery или других библиотек).

Ключевая часть меняет свойство стиля вашего элемента target (я также добавил несколько кратких комментариев, которые расскажут вам, что делает скрипт).

description.style.backgroundColor = 'orange' 

var button = document.getElementById('button'); // find button 
 
var description = document.getElementById('figcaption'); // find description 
 
var changeDescription = function() { 
 
    // change color for the description 
 
    description.style.backgroundColor = 'orange'; 
 
}; 
 
button.addEventListener('click', function(event) { 
 
    // detect click on button 
 
    changeDescription(); 
 
});

<button id="button">Clcik me please</Button> 
 

 
<figure> 
 
    <img src="http://pipsum.com/435x310.jpg" alt="The Pulpit Rock" width="304" height="228"> 
 
    <figcaption id="figcaption">Fig1. - Your description here.</figcaption> 
 
</figure>

В качестве альтернативы вы могли бы также использоваться classList.

description.classList.add("yourClass");