Naturalmente es porque estas sobre escribiendo tu elemento capa con otro contenido. mira esto de aqui:
document.getElementById("capa").innerHTML = x;
Lo que estas haciendo ahí es literalmente sobrescribir tu elemento capa por una "imagen", que enrealidad x no almacena una imagen, asi que por eso la imagen se borra.
Para poder solucionar tu error debes agregale el +=
, esto lo que hace es sumarle a lo que ya contenia esa propiedad lo que quieres agregarle, haciendo que asi no se borre lo anterior que hayas agregado en el innerHTML
.
entonces queda asi:
document.getElementById("capa").innerHTML += x;
Una cosa mas, esto que estas haciendo aqui:
var x = document.getElementById("capa").src="descarga.png";
Te diria que lo separaras, ya que ahi no estaras almacenando lo que piensas que deberias estar almacenando.
Ahi estarias almacenando undefined
, para que no ocurra esto no deberías cambiar las propiedades de un elemento HTML
y al mismo tiempo asignarlo a una variable, en su lugar hazlo por separado así:
var x = document.getElementById("capa");
x.src="descarga.png"
De todas maneras he visto que tu elemento con id capa es como tal una imagen asi que NO hay necesidad de usar innerHTML
, pues como tal solo necesitas cambiarle el atributo src
a la imagen para cargarla.
Por lo tanto lo mas optimo es simplemente que tu código quede de esta manera:
if(resultados>=7 && resultados<=14 ){
document.getElementById("capa").src="descarga.png";
}
En este caso se borra la variable x
porque se considera una mala practica ir dejando variables globales por todas partes con var
, ademas no se si querras usar de nuevo en algun otro lugar ese elemento, en caso de que desees usar ese elemento en otras partes de tu codigo, te aconsejo que hagas de ese elemento una variable global pero usando let
de esta manera y NO var:
//Notese que debe ir fuera de bloques (fuera del if) para que pueda existir
//y ser usada globalmente.
let capa = document.getElementById("capa");
if(resultados>=7 && resultados<=14 ){
capa.src="descarga.png";
}
Te invito a leer sobre var
, let
y const
y sus diferencias para que te vayas adaptando a este tipo de variables, pues te ayudaran a comprender mejor porque no deberias usar var
.