Javascript 文本从输入到图片中

我正在尝试从输入中提取文本，因为首先是“你的敌人！”并且我需要将此文本放入我正在显示的图片中。我只想点击按钮，按钮将显示图片和图片上的文字（我还需要编辑该文本的位置一点）它可以做CSS样式什么将使用我的位置，然后使用他们的var-en？也有可能多次点击该按钮，每次我在输入中更改文本时，它将采用新文本，删除或隐藏带有旧文本的图片，并显示带有新文本的图片

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>

敌人：




函数dinos（）
{
document.getElementById（'loadingImage'）.style.visibility='visible'；
var en=document.getElementById（“敌人”）.value；
}

是否可以使用z-index CSS属性

敌人：




敌名
函数dinos（）
{
document.getElementById（'loadingImage'）.style.visibility='visible'；
var en=document.getElementById（“敌人”）.value；
document.getElementById（“LOL”）.innerHTML=en；
}

如果要在文本框中设置默认文本，请使用placeholder=“”而不是value