javascript - javascriptを使用してhtmlのボタンでテキスト領域をクリアするには?

Question

私はhtmlにボタンを持っています

<input type="button" value="Clear"> 
<textarea id='output' rows=20 cols=90></textarea>

外部の JavaScript (.js) 関数がある場合、何を記述すればよいですか?

Answer 1

ボタンのクリックで関数を追加してhtmlを変更します

 <input type="button" value="Clear" onclick="javascript:eraseText();"> 
    <textarea id='output' rows=20 cols=90></textarea>

あなたのjsファイルでこれを試してください：

function eraseText() {
    document.getElementById("output").value = "";
}

Answer 2

clickイベント ハンドラーをアタッチし、そのハンドラーからテキストエリアの内容をクリアする必要があります。

HTML

<input type="button" value="Clear" id="clear"> 
<textarea id='output' rows=20 cols=90></textarea>

JS

var input = document.querySelector('#clear');
var textarea = document.querySelector('#output');

input.addEventListener('click', function () {
    textarea.value = '';
}, false);

これが実際のデモです。

Answer 3

jQuery ライブラリを使用すると、次のことができます。

<input type="button" value="Clear" onclick="javascript: functionName();" >

onclick イベントを設定し、この onclick イベントで目的の関数を呼び出すだけです。

function functionName()
{
    $("#output").val("");
}

上記の関数は、テキスト領域の値を空の文字列に設定します。

Answer 4

ID属性をフォームに使用し<textarea>て、次のようにタグをフォームに添付するだけです。

<form name="commentform" action="#" method="post" target="_blank" id="1321">
    <textarea name="forcom" cols="40" rows="5" form="1321" maxlength="188">
        Enter your comment here...
    </textarea>
    <input type="submit" value="OK">
    <input type="reset" value="Clear">
</form>