dropdown icon

Door hendry huisman op 11-04-2023 14:48 gewijzigd op 11-04-2023 15:18

2.298 views

ik heb een probleem de icons komen er nu wel in maar als ik op de pagina kom dan laad die icon1 niet als ik naar icon2 ga laadt die wel en als ik dan weer terug naar icon 1 ga laadt die ook
hoe kan ik icon1 gelijk laden als ik op de pagina kom

- Ariën -

11-04-2023 15:01 gewijzigd op 11-04-2023 15:11

Zijn emoji afbeeldingen geen beter idee?

[size=xsmall]Toevoeging op 11/04/2023 15:10:45:[/size]

h hendry huisman

11-04-2023 15:17

ik heb nu dit en dit werkt wel alleen krijg ik eerst dit te zien

als ik eth klik krijg ik de logo wel te zien en als ik dan weer op btc klik krijg ik ook de logo te zien
hoe krijg ik zeg maar als je op de pagina komt wil ik dat je de btc logo al gelijk ziet.


<!DOCTYPE html>
<html>
<head>
 <title>Icon veranderen bij klikken op option</title>
<style>
#icon-container {
  width: 50px;
  height: 50px;
}

.icon {
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<select id="icon-select">
  <option value="/img/btc_d8db07f87d.svg">BTC</option>
  <option value="/img/eth_f4ebb54ec0.svg">ETH</option>
  <option value="/img/btc_d8db07f87d.svg">Icon 3</option>
  <option value="other">Other</option>
</select>

<div id="icon-container"></div>
<script>
const iconSelect = document.getElementById('icon-select');
const iconContainer = document.getElementById('icon-container');

iconSelect.addEventListener('change', function() {
  const selectedIcon = iconSelect.value;
  
  if (selectedIcon === 'other') {
    iconContainer.innerHTML = '<img class="icon" src="/img/btc_d8db07f87d.svg">';
  } else {
    iconContainer.innerHTML = `<img class="icon" src="${selectedIcon}">`;
  }
});
</script>
</body>
</html>

Jan Koehoorn

14-04-2023 17:32

De code die het icoontje zet wordt pas uitgevoerd op het "change" event van de select. De eerste keer dat je die pagina laadt, wordt dat "change" event niet uitgevoerd, dus moet je even een extra regel JavaScript toevoegen om hem op die eerste waarde te zetten:


<!DOCTYPE html>
<html>
<head>
 <title>Icon veranderen bij klikken op option</title>
<style>
#icon-container {
  width: 50px;
  height: 50px;
}

.icon {
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<select id="icon-select">
  <option value="/img/btc_d8db07f87d.svg">BTC</option>
  <option value="/img/eth_f4ebb54ec0.svg">ETH</option>
  <option value="/img/btc_d8db07f87d.svg">Icon 3</option>
  <option value="other">Other</option>
</select>

<div id="icon-container"></div>
<script>
const iconSelect = document.getElementById('icon-select');
const iconContainer = document.getElementById('icon-container');

iconSelect.addEventListener('change', function() {
  const selectedIcon = iconSelect.value;

  if (selectedIcon === 'other') {
    iconContainer.innerHTML = '<img class="icon" src="/img/btc_d8db07f87d.svg">';
  } else {
    iconContainer.innerHTML = `<img class="icon" src="${selectedIcon}">`;
  }

});
    iconContainer.innerHTML = '<img class="icon" src="/img/btc_d8db07f87d.svg">';
</script>
</body>
</html>

Reageren

Inloggen om te reageren