入力から画像へのテキスト

Question

私は入力からテキストを取ろうとしています。最初は「あなたの敵」です。このテキストは、私が見せていることを絵に描く必要があります。私はちょうどボタンをクリックしてボタンをクリックすると写真が表示され、その写真上にテキストが表示されます（また、私はそのテキストの位置を少し編集する必要があります）CSSスタイルを実行して自分の位置を使用し、varアン？また、そのボタンを複数回クリックすることも可能です。入力時にテキストを変更すると、新しいテキストが表示され、古いテキストを削除または非表示にして、新しいテキストで写真を表示します。

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-インデックスCSSプロパティを使用しますか？

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>

この情報がお役に立てば幸い！