Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

186
Vistas
change value src in html page

I want to change the image size or any value in HTML page by this way dropdown list.

this is my code:

<html>
  <head>

  </head>
  <body>

   <select id="selectbox" name="">
              <option value="empty"></option>
              <option value="firstSize">1</option>
              <option value="SecondSize">2</option>
</select>
<br><br>

    <img src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432">
</div> 

  </body>
</html>

If selecting 1 from selectbox I want to change the size of the image above src to "https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200"

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

This will work, you can change the button's text if you want

function check(){
var val = document.getElementById("selectbox").value
var pic =  document.getElementById("img")
if(val==="firstSize"){
pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200')
}
}
<html>
  <head>

  </head>
  <body>

   <select id="selectbox" name="">
              <option value="empty"></option>
              <option value="firstSize">1</option>
              <option value="SecondSize">2</option>
</select>
<button onclick="check()">Check</button>
<br><br>
    <img src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432" id="img">
</div> 

  </body>
</html>

OR you can do

function check(){
var val = document.getElementById("selectbox").value
var pic =  document.getElementById("img")
if(val==="firstSize"){
pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200')
}
}
<html>
  <head>

  </head>
  <body>

   <select onchange="check()" id="selectbox" name="">
              <option hidden value="empty"></option>
              <option value="firstSize">1</option>
              <option value="SecondSize">2</option>
</select>

<br><br>
    <img src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432" id="img">
</div> 

  </body>
</html>

what's different in snippet 1 and 2 is in number 2 there's no button, when you click an option it will change and you cannot select the empty value

you can combine 1 and 2 using hidden and no button but if it breaks just post in this question/post

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda