Может ли входным значением кнопки быть изображение, которое изменяется при переключении?

Question

У меня есть кнопка, которая показывает и скрывает элемент при нажатии. Он также изменяет значение на «Показать» или «Скрыть». Я хотел бы, чтобы изображение (вместе с текстом) в атрибуте значения кнопки изменялось вместе с текстом при переключении.

РЕДАКТИРОВАТЬ: Я обновил свой код с помощью рекомендованных решений. Однако есть и другие проблемы, которые нужно решить. Вот codepen , визуально показывающий, что я имею в виду

Вот фрагмент.

function toggle(ele) {
  var cont = document.getElementById('proj-details');
  if (cont.style.display == 'flex') {
    cont.style.display = 'none';

    document.getElementById(ele.id).value = 'Show details';
  } else {
    cont.style.display = 'flex';
    document.getElementById(ele.id).value = 'Hide details';
  }
}

.spec-proj-briefshowhide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 3em;
  padding-right: 3em;
}

.spec-proj-briefshowhide input {
  padding: 0.4em;
  color: blue;
  font-size: 0.8em;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  background-color: white;
  border: 0.05em solid blue;
  border-radius: 0.5em;
}

.spec-proj-briefshowhide img {
  max-width: 10em;
  padding: 2em;
  display: flex;
  flex-direction: column;
}

button {
  display: flex;
  flex-direction: row;
  align-items: center;
}

<div class="spec-proj-briefshowhide">
  <p>
    <input type="button" value="Hide details" id="bt" onclick="toggle(this)">
  </p>
  <div style="display:flex;" id="proj-details">
    <div>
      <p>Brief:</p>
      <ul>
        <li>So I have this show/hide toggle button working to my liking.</li>
        <li>What I would also like is to have an image along with text in the button.</li>
        <li>You see..? I have the value attribute of the button changing as I click on it to toggle.</li>
        <li>What I would want is an image with open-eyes to represent the displayed element and another image close-eyes to represent when I toggle the button to hide the details. Check what I mean by close and open eyes before thinking I am crazy.</li>
        <li>I noticed people use image background, especially when they want a button to look like a play button, pause button or a record button. These are static buttons and do not change.</li>
        <li>I want a change of image instead, because I have two images which need to be toggled back and forth</li>
      </ul>
    </div>
  </div>
  <p>Here are the two images for the curious kind.<img src="https://i.ibb.co/NjRDMFS/OPENEYE.png" alt="OPENEYE" border="0">
    <img src="https://i.ibb.co/yPhD6HF/CLOSEEYE.png" alt="CLOSEEYE" border="0">
  </p>
  <button>Show<img src="https://i.ibb.co/NjRDMFS/OPENEYE.png" alt="OPENEYE" border="0">details</button>
  <button>Hide<img src="https://i.ibb.co/yPhD6HF/CLOSEEYE.png" alt="CLOSEEYE" border="0">details</button>
</div>

Answer 1

Назначение полей имени и значения во входных данных - отправка формы на сервер.

Что касается установки изображения в поле значения - вы можете включить изображение href в значение поле, но оно не будет автоматически отображать изображение. Вы не можете включать изображение и текстовое значение.

Что я предлагаю вам сделать, если вы хотите иметь и то и другое, и отправить оба на сервер, - это использовать поле input type = hidden с URL-адресом изображения, плюс отдельный тег img для визуального изображения, например

   <p>
   <table><tr>
   <td id="imgTD"><input type="hidden" name="imgField" id="imgField" /> </td>
   </tr>
   <tr><td>
   <input type="button" value="Hide details" id="bt" onclick="toggle(this)">
   </td></tr>
   </table>
   </p>

Собирая вместе мой пример кода, я заметил, что вы не дали своей кнопке имени. Если кнопка не предназначена для форм, вы можете использовать тег button вместо ввода

Answer 2

есть еще один простой способ просто изображение sr c:

const imgBtn = document.getElementById("eye")
function toggleImg(){
    let cont = document.getElementById('proj-details');
      if (cont.style.display == 'flex') {
        cont.style.display = 'none';
        imgBtn.src = "https://i.ibb.co/yPhD6HF/CLOSEEYE.png"

      } else {
        cont.style.display = 'flex';
        imgBtn.src = "https://i.ibb.co/NjRDMFS/OPENEYE.png"

      }
}

imgBtn.addEventListener("click",toggleImg)