web-dev-qa-db-ja.com

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

HTMLにボタンがあります

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

外部javascript(.js)関数がある場合、何を書くべきですか?

14
noobprogrammer

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

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

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

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

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

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);

そして、これが working demo です。

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

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

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

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

2
Ali Shah Ahmed

あなたのHtml

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

あなたのJavascript

function clearContent()
{
    document.getElementById("output").value='';
}
0
A.A Noman