私は、キーボード上の特定の文字

index.htmlを私は、キーボード上の特定の文字

<body id="body"> 
    <div id="box1" class="box"></div> 
    <script type="text/javascript" src="js/main.js"></script> 
</body>

のstyle.css

.box { 

    padding: 2em; 
    margin: 0 auto; 
    top: 50%; 
    left: 50%; 
    height: 100px; 
    width: 100px; 
    background-color: green; 
}

を押したときに、私はあなたが押したときに、いくつかの機能を実行するためにはJavaScriptをしようとするdivのサイズを変更したいですキーボードの "e"を押すとdiv（ボックス）のサイズに+10 pxが自動的に追加されます。それはこのようになります。

main.js

document.onkeydown = function (event) { 
    var key = event.keyCode || event.which; 
    switch (key) { 
    case 81: 
     var main = document.getElementsByClassName('box').offsetHeight; 
     var sidebar = document.getElementsByClassName('box').offsetWidth; 
     main += 10 +'px'; 
     sidebar += 10 +'px' 
     break; 
    default: 
     console.log('option no valid!'); 
    } 
};

しかし、それは動作しません。

出典

2017-01-08 Georges Kayembe

あなたはあなたのコードが間違って物事の多様性を持っていた... mainとsidebarを調整する

まず、あなたの計算が間違っていましたし、連結ではなく、加えてしまいます。

また、新しく計算された値では何もしていませんでした。プロパティに等しい変数を設定しても、そのプロパティへの双方向バインディングがあるわけではありません。あなたがしていることはすべて価値を得ることです。値を設定する場合は、プロパティに書き戻す必要があります。ボックスのheightとwidth（offsetheightとoffsetwidthは読み取り専用です）を変更するとします。

querySelectorAll()を使用して要素を検索すると、クエリに一致するすべての要素を含む配列のようなオブジェクトが返されます。インデックスを使用してコレクションから使用する要素を取得する必要があります。クエリで1つの要素のみを検索する場合は、querySelector()の代わりにquerySelectorAll()を使用します。querySelector()は、検索された要素への参照を直接返します（インデックスが不要なため）。

次に、eキーコードは、69ではない81

document.onkeydown = function (event) { 
 
    var key = event.keyCode || event.which; 
 
    console.log("Key code is: " + key + " - Key pressed was: " + String.fromCharCode(key)); 
 
    switch (key) { 
 
    case 69: 
 
     // Note the [0] at the end of this line to extract the first 
 
     // element in the set of matched elments. 
 
     var box = document.getElementsByClassName('box')[0]; 
 
     
 
     // Get the values you need 
 
     var main = box.offsetHeight; 
 
     var sidebar = box.offsetWidth; 
 
     
 
     // Do the math first, then concatenate the "px" and assign the answer back to the variable 
 
     main = (main + 10) +'px'; 
 
     sidebar = (sidebar + 10) +'px' 
 
     
 
     // Now use the new values by assigning them to the correct properties of the object: 
 
     box.style.height = main; 
 
     box.style.width = sidebar; 
 
     break; 
 
    default: 
 
     console.log('option no valid!'); 
 
     break; 
 
    } 
 
}

.box { 
 
    padding: 2em; 
 
    margin: 0 auto; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 5px; 
 
    width: 5px; 
 
    background-color: green; 
 
}

<div id="box1" class="box"></div>

出典

2017-01-08 22:45:39

素晴らしいです！あなたのアドバイスのためにたくさんのお誘い！私はありがとう、ありがとう！ –

私は、キーボード上の特定の文字

答えて

関連する問題