Resimden girişe metin

Question

Girişten metin almaya çalışıyorum, çünkü başlangıç ​​için "ENERJİNİZ!" ve bu metni gösterdiğim şeye yerleştirmem gerekiyor. Sadece butona tıklamak istiyorum ve butona resim gösterilecek ve bu resimdeki metin (aynı zamanda bu metnin pozisyonunu biraz değiştirmem gerekiyor) CSS stilini yapmak benim pozisyonlarımı kullanmam ve daha sonra bunları var tr? Ayrıca bu düğmeyi birden çok kez tıklamak mümkün ve girişteki metni değiştirdiğimde her zaman yeni metin alacak, eski metinle resim silecek veya gizleyecek ve yeni metinle resim göstereceğim.

Enemy: <input type="text" value="YOUR ENEMY!" id="enemy"> 
    <br> 
    <input type="button" value="BEAT UP YOUR ENEMY" onclick="dinos()"/> 
    <br> 
    <img id="loadingImage" src="dino.gif" style="visibility:hidden"/> 
    <script> 
    function dinos() 
    { 
    document.getElementById('loadingImage').style.visibility='visible'; 
    var en = document.getElementById("enemy").value; 
    } 
    </script> 

Answer 1

Z-endeksi CSS özelliğini kullanabilir miyim? Bu yardımcı olur

ENEMY: <input type="text" value="YOUR ENEMY!" id="enemy"> 
 
    <br> 
 
    <input type="button" value="BEAT UP YOUR ENEMY" onclick="dinos()"/> 
 
    <br> 
 
    <img id="loadingImage" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="visibility:hidden"/> 
 
<label style="z-index: 10; position: absolute; left: 30px; top: 100px;" id="LOL">Enemy's name</label> 
 
    <script> 
 
    function dinos() 
 
    { 
 
    document.getElementById('loadingImage').style.visibility='visible'; 
 
    var en = document.getElementById("enemy").value; 
 
     document.getElementById("LOL").innerHTML = en; 
 
    } 
 
    </script>

Umut!