HTML5のoutputタグのonforminputイベントの失敗の解決策-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML5のoutputタグのonforminputイベントの失敗の解決策

Jul 03, 2017 am 10:43 AM

html5 output

公式 Web サイトのこの例では、onforminput イベントは実行されないようです。 <html>

&lt;head&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function resCalc()
{
numA=document.getElementById(&quot;num_a&quot;).value;
numB=document.getElementById(&quot;num_b&quot;).value;
document.getElementById(&quot;result&quot;).value=Number(numA)+Number(numB);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;使用 output 元素的简易计算器：&lt;/p&gt;
&lt;form onsubmit=&quot;return false&quot;&gt;
&lt;input id=&quot;num_a&quot; /&gt; +
&lt;input id=&quot;num_b&quot; /&gt; =
&lt;output id=&quot;result&quot; onforminput=&quot;resCalc()&quot;&gt;&lt;/output&gt;
&lt;/form&gt;
&lt;/body&gt;

ログイン後にコピー

アドバイスをお願いします

それでは、コードはテスト済みです。ははは、まだコアではない html5 タグは何ですか?

原則: 出力を入力に変更してから、onClick イベントを使用します。

簡単に言うと、<output id="result" onforminput="resCalc()"></output> を <input id="result" onclick="resCalc()" /> に変更します。それを実行し、実行後に最後の入力ボックスを直接クリックします。必ず入力ボックスをクリックしてください。

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function resCalc()
{
numA=document.getElementById(&quot;num_a&quot;).value;
numB=document.getElementById(&quot;num_b&quot;).value;
document.getElementById(&quot;result&quot;).value=Number(numA)+Number(numB);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;使用 output 元素的简易计算器：&lt;/p&gt;
&lt;form onsubmit=&quot;return false&quot;&gt;
 &lt;input id=&quot;num_a&quot; /&gt; +
 &lt;input id=&quot;num_b&quot; /&gt; =
 &lt;input id=&quot;result&quot; onclick=&quot;resCalc()&quot; /&gt;
&lt;/form&gt;
 
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

なぜ公式ウェブサイトの例が機能しないのか理解できません

コードが間違っていて、イベントメソッドが間違っています。

以上がHTML5のoutputタグのonforminputイベントの失敗の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。