JavaScript(ES6)で、半角英数字かどうかチェックする関数を作成し、その結果をhtml側でボタンを押すとBooleanとして出力したいです。下記のように作成しましたが、出力部分をどのようにすればよいでしょうか。よろしくお願いいたします。 const CheckHalfwidth = function(str) { if(str.match(/^[a-zA-Z0-9]+$/)){ return true; } else{ return false;} } const onButtonClick = function() { }

Javascriptの出力結果をhtmlボタンで出力したい

解決済

質問者：skysdog
質問日時：2018/12/12 19:20
回答数：3件

JavaScript(ES6)で、半角英数字かどうかチェックする関数を作成し、その結果をhtml側でボタンを押すとBooleanとして出力したいです。下記のように作成しましたが、出力部分をどのようにすればよいでしょうか。よろしくお願いいたします。

<html>
<head></head>
<body>
<script>
const CheckHalfwidth = function(str) {
if(str.match(/^[a-zA-Z0-9]+$/)){ return true; }
else{ return false;}
}

const onButtonClick = function() {

}
</script>
<input type="text" id="txt1">
<input type="button" value="半角英数チェック" onclick="onButtonClick();">
<div id="output">　</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yambejp
回答日時：2018/12/13 10:26

とりあえずこんな感じ

- 0
- 件

通報する

この回答へのお礼

完成形となっており分かりやすかったので、ベストアンサーとさせていただきました。ご丁寧にありがとうございました。

通報する

お礼日時：2018/12/17 10:27

No.2

回答者： fujillin
回答日時：2018/12/13 09:26

こんにちは

>その結果をhtml側でボタンを押すとBooleanとして出力したいです。
出力の内容（意味）はBooleanでも、表示はテキストで行うことになります。

以下は、（ご提示の）id="output"要素を出力先として、ボタンクリックでそこに表示する例です。
例では固定文字列の表示にしてありますが、イベント処理の中で表示したい内容を作成してその結果を表示すればよいでしょう。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title></head>
<body>

<input type="button" value="TEST" />
<div id="output"></div>

<script type="text/javascript">
document.querySelector("input").addEventListener("click",function(){
let message = "Your Message";
document.getElementById("output").textContent = message;
});
</script>
</body>
</html>