addEventListenerは画像を無視して番号を取得する方法

Question

画像にボタンがあり、問題のない別のdivに配置されます。私はガイドに従ったJSと混同しています。画像付きのボタンを想像してください。ボタンの値をクリックすると、javascriptとデータベースによって数字だけが取得されます。以下は、jsの変数宣言されています。イメージが行くと数が画像と番号が付いたボタンのクラスです

var numbers  = document.querySelectorAll('.number'); 
var screenSpans = document.querySelectorAll('#screen span'); 

画面のスパンがあります。 HTMLでは、それは次のようになります。

<div id="screen"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <button class="number"> 
    <img src="img/1.png" />1 
    </button> 

私はそれが動作しますが、私はボタンタグ内<img src="img/1.png" />を持っている時はいつでもボタンが動作しない提出する場合は、単にしようとする「1」を追加したことに気づくでしょう。 imgがなくてもすべてが完璧ですが、数字の代わりにイメージが必要です。要するに、私はちょうどそれが画面スパンに行くとJavaScriptとデータベースが代わりに番号を読み取るクリックされたときに、イメージをしたい。私のjavascriptはどうやってイメージを無視できますか？以下は、私が使用した重要なjsです：

for (var i = numbers.length - 1; i >= 0; i--) { 
    numbers[i].addEventListener('click', function(){ 
     reset = 0; 
     nextSpan(this.innerHTML); 
    }); 
}; 
function nextSpan (currNumber){ 
    for (var i = 0; i < screenSpans.length; i++) { 
     if (screenSpans[i].innerHTML == '' && reset == 0){ 
      screenSpans[i].innerHTML = currNumber; 
      reset = 1; 
     } 
    }; 
} 

助けていただきありがとうございます。ありがとうございました！

Answer 1

form要素内に、非表示の入力要素（例：<input type="hidden" name="prop" value="2" />）を作成します。この非表示入力の値を自由に設定することができます（たとえば、画像をクリックすると）。画像に数値を入力する場合は、画像ごとにカスタム属性（例：data-img-num="2"）を設定し、その画像をクリックすると非表示の入力値として設定できます。たとえば：そのような

HTML

<form> 
    <input type="hidden" name="prop" value="0" /> 
    <input type="submit" /> 
</form> 

<div class="imgContainer"> 
    <img src="" data-img-num="1" /> 
    <img src="" data-img-num="2" /> 
</div> 

のjQueryなど

$('.imgContainer > [data-img-num]').on('click', function() { 
    $('form input[name="prop"]').val($(this).attr('data-img-num')); 
}); 

何かが行う必要があります。

Answer 2

<input type="text">と<label>の要素を使用できます。 appearanceinput type="text"要素styleをappearance:buttonに設定します。 valueの属性は1です。 maxlength~0; <form>内の要素の適切な名前にnameを追加します。 cssに要素background-imageを設定すると、:hover疑似要素セットcursorからpointerに設定されます。

<label>の要素を<span>の要素に置き換えます。 clickの.number要素では、input type="text".labelsを、.innerHTMLからの要素に設定します。 input.number要素に関連付けられclickinput type="text"の要素の反復.labelsで

は、input type="text"要素の.valueにlabel.innerHTMLを設定しました。submitformの.nameで

、input type="text'要素の.valueペアが提出されます。

#screen > input[type="text"].number { 
 
    display:block; 
 
    background-image: url("http://lorempixel.com/50/50/technics"); /*"img/1.png"*/ 
 
    background-repeat: no-repeat; 
 
    color: transparent; 
 
} 
 

 
#screen > input[type="text"].number:hover { 
 
    cursor: pointer; 
 
}

<form action="/path/to/server/" method="POST"> 
 

 
    <div id="screen"> 
 
    <label for="image"></label> 
 
    <label for="image"></label> 
 
    <label for="image"></label> 
 
    <input type="text" 
 
      id="image" 
 
      class="number" 
 
      name="number" 
 
      value="1"    
 
      maxlength="0" 
 
      style="appearance:button;width:50px;height:50px;" /> 
 
    <!-- border:none;outline:none; --> 
 
    <!-- 
 
    <button class="number"> 
 
    <img src="img/1.png" />1 
 
    </button> 
 
    --> 
 
    <input type="submit"> 
 
    </div> 
 
</form> 
 
<script> 
 
    document.querySelector("#screen > .number") 
 
    .addEventListener("click", function(event) { 
 
    for (let label of event.target.labels) { 
 
      label.innerHTML = event.target.value; 
 
    } 
 
    }); 
 
</script>

jsfiddle https://jsfiddle.net/qzeyc3jL/