モバイルブラウザのクリックイベントを変更する

Question

幅が400ピクセル未満のブラウザのボタン（温度切り替え）を削除します。代わりに、温度を切り替えるにはdivに触れたい。私はこのコードを書いたが、うまくいきません。 「touchTemp」は含まれているdivのIDです。

if (window.innerWidth < 400) { 
    document.getElementById("touchTemp").addEventListener("click", 
    function(e) { 
     console.log("Screen width is less than 400px"); 
     var text = $('#temperature').text(); 
     if (text.slice(-1) === "F") { 
     $("#temperature").html(tempCelsius + " C" + "°"); 
     } else { 
     $("#temperature").html(tempFahrenheit + " F"); 
     } 

     e.preventDefault(); 
    }); 
} // end of "if statement" 

輪郭青色DIVは、温度を切り替えるタッチされる領域です。

CodePen Project Link

Answer 1

私はあなただけの完全性とテストを容易にするためにクリックするとともに、タッチハンドラを追加することをお勧め。

var theElement = document.getElementById("touchTemp"); 

theElement.addEventListener("click", myFunction, false); 
theElement.addEventListener("touchend", myFunction, false); 

function myFunction(e) { 
    console.log("Screen width is less than 400px"); 
    var text = $('#temperature').text(); 
    if (text.slice(-1) === "F") { 
    $("#temperature").html(tempCelsius + " C" + "°"); 
    } else { 
    $("#temperature").html(tempFahrenheit + " F"); 
    } 

    e.preventDefault(); 
    return false; 
}