フォームにリアルタイムで出力される現状から、ボタンを押して出力する形にしたい

###前提・実現したいこと

今入力フォームに一文字入力するたびに、出力フォームに表示される
↓
後入力フォームに入力したあと、ボタンを押して出力フォームに表示させたい

※自分で試すこともなく、基本的な質問で申し訳ありません。
当方、初心者なのでご容赦くださいませ・・

###該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://www.justkeyman.com/sys/css/com.css" type="text/css" media="all"> <title>紹介コード確認フォーム</title> <style type="text/css"> * { margin: 0; padding: 0; }

    form[name="change_num"] {
        white-space: nowrap;
    }
</style>

</head> <body> <br> <hr> <h1 class="jpf"> 紹介コードを取得</h1> <hr> <h3 class="jpf"> 下記の紹介コードを紹介したい人に教えて「登録する」のフォームに入力してください</h3> <br> <br> <div id="main"> <form name="change_num"> <label> あなたの電話番号: <input name="A" type="text" size="20" id="input"> </label> <br><br> <label> 紹介コード: <input name="B" type="text" size="20" id="output"> </label> <input type="reset" value="消去"><br> </form> <br> <br> <br> <br> <br> <br> </div> <hr> <div id="foot"> <address>@ Created by JUSTKEYMAN</address> </div> <script> function number(number, flag) { number = number ? number.replace(/\s/g, "") : "0"; const j = (flag ? 36 : 10); if (number.match(j < 11 ? /[^0-9]/ : /[^0-9\x41-\x5a]/i)) { (flag ? document.getElementById("output") : document.getElementById("input")).value = 0; number = "0"; } (flag ? document.getElementById("input") : document.getElementById("output")).value = parseInt(number, j).toString(flag ? 10 : 36).toUpperCase(); }

document.getElementById("input").addEventListener("keyup", function () {
    number(document.getElementById("input").value, false);
}, false);

document.getElementById("output").addEventListener("keyup", function () {
    number(document.getElementById("output").value, true);
}, false);

</script> </body> </html>

kei344

2017/07/24 09:56

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のようにしてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="http://www.justkeyman.com/sys/css/com.css" type="text/css" media="all">
6    <title>紹介コード確認フォーム</title>
7    <style type="text/css">
8        * {
9            margin: 0;
10            padding: 0;
11        }
12
13        form[name="change_num"] {
14            white-space: nowrap;
15        }
16    </style>
17</head>
18<body>
19<br>
20<hr>
21<h1 class="jpf"> 紹介コードを取得</h1>
22<hr>
23<h3 class="jpf"> 下記の紹介コードを紹介したい人に教えて「登録する」のフォームに入力してください</h3>
24<br>
25<br>
26<div id="main">
27    <form name="change_num">
28        <label>
29            あなたの電話番号: <input name="A" type="text" size="20" id="input">
30            <input type="button" id="button1" value="クリック">
31        </label>
32        <br><br>
33        <label>
34            紹介コード: <input name="B" type="text" size="20" id="output">
35        </label>
36        <input type="reset" value="消去"><br>
37    </form>
38    <br>
39    <br>
40    <br>
41    <br>
42    <br>
43    <br>
44</div>
45<hr>
46<div id="foot">
47    <address>@ Created by JUSTKEYMAN</address>
48</div>
49<script>
50    function number(number, flag) {
51        number = number ? number.replace(/\s/g, "") : "0";
52        const j = (flag ? 36 : 10);
53        if (number.match(j < 11 ? /[^0-9]/ : /[^0-9\x41-\x5a]/i)) {
54            (flag ? document.getElementById("output") : document.getElementById("input")).value = 0;
55            number = "0";
56        }
57        (flag ? document.getElementById("input") : document.getElementById("output")).value = parseInt(number, j).toString(flag ? 10 : 36).toUpperCase();
58    }
59
60    document.getElementById("button1").addEventListener("click", function () {
61        number(document.getElementById("input").value, false);
62    }, false);
63
64    document.getElementById("output").addEventListener("keyup", function () {
65        number(document.getElementById("output").value, true);
66    }, false);
67</script>
68</body>
69</html>