Text von Eingabe in das Bild

Question

Ich versuche, Text von Eingabe zu nehmen, für Start ist da "IHR FEIND!" und diesen Text muss ich ins Bild setzen, was ich zeige. Ich möchte nur auf den Button klicken und der Button zeigt Bild und auf dem Bild wird Text (auch ich muss die Position dieses Textes ein wenig bearbeiten) es ist möglich, CSS-Stil zu tun, was meine Positionen verwenden wird und sie dann auf var verwenden de? Es ist auch möglich, mehrmals auf diese Schaltfläche zu klicken, und jedes Mal, wenn ich den Text in der Eingabe ändere, wird neuer Text verwendet, das Bild mit altem Text gelöscht oder ausgeblendet und das Bild mit neuem Text angezeigt.

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

Vielleicht verwenden Sie die Z-Index CSS-Eigenschaft?

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>

hoffe, das hilft!