htmlのinput outputについて

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
monacaでhtmlでアプリを作っています。
入力欄に入力した数字を「課金上限」の下に表示させようと、input、outputを試したのですが、できません。
どうしたら反映されるでしょうか

該当のソースコード

html
1<html>
2  <head>
3    <meta charset="utf-8">
4    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
5    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
6    <script src="components/loader.js"></script>
7    <link rel="stylesheet" href="css/main.css">
8
9    <title>メイン</title>
10  </head>
11  <body>
12    <header>
13  <div id="nav-drawer">
14    <form oninput="result.value = (settei.value)">
15      <input id="nav-input" type="checkbox" class="nav-unshown">
16      <label id="nav-open" for="nav-input"><span>menu</span></label>
17      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
18      <div id="nav-content">
19        <p>上限設定</p>
20        <p><input type="number" name="settei"></input>円</p>
21        <input type="button" value="決定"></input>
22      </div>
23  </div>
24</header>
25    <div class="jougen">
26      <h2>課金上限</h2>
27      <p><output for="result">0</output>円</p>
28    </div>
29    </form>
30    <h2>入力</h2>
31    <input type="number" name="b">円
32    <input type="submit" value="決定"></input>
33    <h2>今月の残り課金額</h2>
34    <p><output name="result" >0</output>円</p>
35    <br>
36    <p>履歴</p>
37    <table></table>
38    <input type="reset" value="クリア"></input>
39    </form>
40  </body>
41
42
43</html>

m.ts10806

2019/03/28 05:15

「Monaca」もタグに追加願います。

m.ts10806

2019/03/28 05:16

「input、outputを試した」とは？JavaScriptで対応しようとされているのでしたらそのコードも追加してください。（タグも追加してください）

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

回答1件

ベストアンサー

自己解決しました！
formタグの場所が悪かったみたいです…

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="css/main.css">

    <title>メイン</title>
  </head>
  <body>
    <header>
  <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span>menu</span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">
        <form id="settei" oninput="rslt.value = Number(settei.value);">
        <p>上限設定</p>
        <p><input type="number" name="settei"></input>円</p>
        </form>
        <input type="button" value="決定"></input>
      </div>
  </div>
</header>
    <div class="jougen">
      <h2>課金上限</h2>
      <p><output name="rslt" form="settei">0</output>円</p>
    </div>
    <h2>入力</h2>
    <input type="number" name="b">円
    <input type="submit" value="決定"></input>
    <h2>今月の残り課金額</h2>
    <p><output name="result" >0</output>円</p>
    <br>
    <p>履歴</p>
    <table></table>
    <input type="reset" value="クリア"></input>
    </form>
  </body>


</html>

投稿2019/03/28 05:26

退会済みユーザー

総合スコア0