私はJSにかなり新しいだと私はシンプルなものを構築することで学んでいるのonclick

Question

var change = document.getElementById('pounds'); 
 
var click = document.getElementById('convert'); 
 

 
click.addEventListener('click', test(e)); 
 

 
function test(e) { 
 
    change.addEventListener('input', function(e) { 
 
    let lbs = e.target.value; 
 
    document.getElementById('ounce').innerHTML = lbs * 16; 
 
    }); 
 
}

<input type="text" placeholder='convert' id='pounds'> 
 
<p>Your conversion: </p> 
 
<p id='ounce'></p> 
 
<button id="convert" onclick="test()">Convert Now</button>

で値を取得します。私はオンスのコンバーターにポンドをつくろうとしていますが、入力時にリアルタイム値を取得する方法を知っていますが、ボタンをクリックすると結果が得られます。入力する前にボタンをクリックする必要がありますが、それは私が探しているものではありません。ボタンをクリックするだけで値を取得したいです。

これは簡単な質問ですが謝罪しますが、わかりません。

Answer 1

：あなたはすでにあなたがchange変数に必要な要素への参照を持っています。まず、以下では、コードのリファクタリング版を添付して、なぜ私が行ったように特定のことを行ったのかを説明します。

const conversionButton = document.getElementById('convert-button'); 
 
const conversionDisplay = document.getElementById('conversion-display'); 
 
const userInput = document.getElementById('pounds-input'); 
 

 
conversionButton.addEventListener('click', convertPoundsToOunces); 
 

 
function convertPoundsToOunces() { 
 
    let lbs = userInput.value; 
 
\t 
 
    conversionDisplay.innerHTML = lbs * 16; 
 
}

<input type="text" placeholder="convert" id="pounds-input"> 
 
<p>Your conversion: </p> 
 
<p id="conversion-display"></p> 
 
<button id="convert-button">Convert Now</button>

私が考える最初の事はあなたがaddEventListenerメソッドの内部で実行されているテスト機能を持っていたということでした。

新しい変数名と

click.addEventListener('click', test());

またはこの場合：

conversionButton.addEventListener('click', convertPoundsToOunces);

あなたは

click.addEventListener('click', test);

の代わりをするだろうので、代わりにそこに機能を参照したいです

ボタンの時に呼び出されるこの方法では、 cked。

あなたはonclick属性も使用していることに気付きました。そこにも必要はありません。ボタンをクリックしたときにクリックハンドラ関数が実行されるように、イベントリスナーを追加するだけです。入力の価値にもアクセスできるので、e.target.valueは必要ありません。この場合、convertPoundsToOuncesが呼び出されると、userInput.valueはテキスト入力内の値を引き出します。

いくつかの最後の考えと提案：変数をconstの上に変更します。 html属性内の一重引用符と二重引用符の混在は少し奇妙です。私は一般的に常にhtmlの二重引用符をつけます。最後に同じメモに、私は変数に非常に意味のある名前を付けるのが好きです。 Annnnddddは、最終的に、ユーザーがNumber以外のものを入力したときにどのように保護できるかについて考えます。これが助けになるといいですね！

Answer 2

2番目のeventListenerはポンドへの変更を待ちます。ちょうどそれを削除します。

var change = document.getElementById('pounds'); 
 
var click = document.getElementById('convert'); 
 

 
click.addEventListener('click', test); 
 

 
function test(e) { 
 
    let lbs = change.value; 
 
    document.getElementById('ounce').innerHTML = lbs * 16; 
 
}

<input type="text" placeholder='convert' id='pounds'> 
 
<p>Your conversion: </p> 
 
<p id='ounce'></p> 
 
<button id="convert" onclick="test()">Convert Now</button>

Answer 3

問題のカップルがここにあります。主なものは、あなたがtest関数を実行し、すぐにではなく、イベントハンドラとして設定していることである：

click.addEventListener('click', test(e)); 

代わりの機能を実行し、ちょうどそれを参照：

さらに

click.addEventListener('click', test); 

、内実際には計算を実行しません。代わりに、変更ハンドラをテキスト入力に設定するだけです。 （テキストは更新を開始する前に、ボタンをクリックする必要が理由である。）そのハンドラを削除し、ちょうど直接ロジックを呼び出します。最後に、このケースでeは、あなたが期待するもの含めるするつもりはない

function test(e) { 
    let lbs = e.target.value; 
    document.getElementById('ounce').innerHTML = lbs * 16; 
} 

。しかし、幸いにも、あなたはそれをとにかく使う必要はありません。私はいくつかのことは私が育てたいと思ったことが起こって見る

function test() { 
    let lbs = change.value; 
    document.getElementById('ounce').innerHTML = lbs * 16; 
} 

Example