このコードで、<!-- 入力結果を出力 -->のところの style="font-size: 35px;"の35のところもフォームで入力して指定できるようにしたいです。どうしたらそうできるか、教えていただきたいです。よろしくお願いいたします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力文字表示</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
font-family:'メイリオ', 'Meiryo','MS ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}
</style>
</head>
<body>
<main>
<!-- 入力フォーム -->
<form action="#" id="form">
<input type="text" name="content">
<input type="submit" value="表示">
</form>
<!-- 入力結果を出力 -->
<p id="output" style="font-size: 35px;"></p>
</main>
</body>
<script>
// submit時にイベント実行をする関数
document.getElementById('form').onsubmit = function (event) {
// 再読み込み防止
event.preventDefault();
// 入力フォームの内容を取得
let inputForm = document.getElementById('form').content.value;
// 入力内容を出力
document.getElementById('output').textContent = `${inputForm}`;
}
</script>
</html>
No.1
- 回答日時:
document.getElementById('output').style.fontSize = '35px';
35pxの部分を入力した値にすると書き換わるかなと思います。
No.2ベストアンサー
- 回答日時:
優里さん
・・・・・style="font-size: 35px;"の35のところもフォームで入力して指定・・・・・・・
参考例。↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>入力文字表示</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
font-family:'メイリオ', 'Meiryo','MS ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}
</style>
</head>
<body>
<main>
<!-- 入力フォーム -->
<form action="#" id="form">
入力文字: <input type="text" name="content"><br>
文字サイズ: <input type="text" name="fontsz" size="3" value="35">
<input type="submit" value="表示">
</form>
<!-- 入力結果を出力 -->
<p id="output" style="font-size: 35px;"></p>
</main>
</body>
<script>
// submit時にイベント実行をする関数
document.getElementById('form').onsubmit = function (event) {
// 再読み込み防止
event.preventDefault();
// 入力フォームの内容を取得
let inputForm = document.getElementById('form').content.value;
let fontsize = document.getElementById('form').fontsz.value;
document.getElementById('output').style.fontSize = fontsize + 'px';
// 入力内容を出力
document.getElementById('output').textContent = `${inputForm}`;
}
</script>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP PHPのエラーの解消法について教えて下さい。 1 2023/02/06 10:48
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない 7 2023/12/15 19:32
- JavaScript HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない 2 2023/12/18 18:12
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
- PHP アマゾンのような評価の星を選択した情報を確認画面でも表示させたいです。 1 2023/10/02 10:52
- PHP PHPでユーザー情報を入力して簡易ログイン機能をつくってみたのですが 1 2023/05/29 08:51
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
プログラミング言語の制作方法について
C言語・C++・C#
-
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
[初心者]javascriptのfor文でなぜか繰り返し処理をしない。理由がわかりません。
JavaScript
-
-
4
Cookieに保存されない
JavaScript
-
5
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
6
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
7
HTMLで画像をポップアップで表示するようにする方法
HTML・CSS
-
8
htmlの修正方法を教えていただきたいです。
HTML・CSS
-
9
htmlのエラーについて(デバッグ)
PHP
-
10
大至急。webのシングルページを作ろうと考え、イラレでデザインをしました。 それからの手順で悩んでる
HTML・CSS
-
11
Chat GTPで、12月のカレンダーと調べて、12月のカレンダーのHTMLを作れたのですが
HTML・CSS
-
12
これの対応OSを教えて下さい。php-8.3.0-src.zip
PHP
-
13
12月のカレンダーを表すHTMLを教えてください。 すいません お願いします
HTML・CSS
-
14
コードレビューをお願いします。
JavaScript
-
15
ウェブ、孤立画像を検出する方法
その他(プログラミング・Web制作)
-
16
すいません HTMLです この画像をHTML、(もしくはCSS)で表すにはどうすれば良いですか? 教
HTML・CSS
-
17
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
18
[再掲]JavaScript|特定URLだった時、特定の要素を変更するコードの書き方を教えて下さい
JavaScript
-
19
デジタルブックを自分のウェブサイトに設置する方法を教えて
オープンソース
-
20
Colorboxがうまく設置できません
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Windowsのアプリ開発ってなんの...
-
テキストボックスの番号を使っ...
-
教えて!全角文字「μ」の半角
-
エクセルVBA テキストボックス...
-
VBAの質問になります メッセー...
-
入力フォームの値をQRコードで...
-
DataGridView 列ごとの入力制限
-
VBA エクセル 条件の設定
-
DataGridViewの桁数制限に関して
-
エディットボックスの入力制限...
-
携帯サイト作成 半角数字(半角...
-
VBA R1C1形式で変数の入力について
-
TextBoxから数字が文字...
-
EXCEL VBA のユーザーフォーム...
-
ExcelVBAのユーザーフォームで...
-
登録フォームで入力制限(コピペ...
-
VS2019を利用したC#プログラミ...
-
TEXTAREA に入力時の位置
-
TextBoxに特定の文字のみ入力を...
-
入力フォームに入力した情報を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
エクセルVBA テキストボックス...
-
テキストボックスの番号を使っ...
-
初歩的な事だと思います。 Sub...
-
数字以外の入力をエラーにする...
-
EXCEL VBA で指定した範囲に入...
-
Excel-VBAでInputBox+Pulldown...
-
入力フォームの値をQRコードで...
-
VBAの質問になります メッセー...
-
c#でTextBoxの入力制限
-
VBAで質問があります
-
教えて!全角文字「μ」の半角
-
VBAでInputBoxの再入力をさせる...
-
excel vba でユーザーフォーム...
-
TextBoxから数字が文字...
-
エディットボックスの入力制限...
-
accessで該当するレコードがな...
-
DataGridViewの桁数制限に関して
-
VBA R1C1形式で変数の入力について
-
「イ分」・・・フンという文字...
-
Windowsのアプリ開発ってなんの...
おすすめ情報