質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1474閲覧

jQuery アラートについて

Junpeioasis

総合スコア9

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/02/08 07:06

編集2021/02/08 07:18

jQueryで、アラートを出したいのですが、

html

1<body> 2 <input type="text" id="value"> 3 <input type="button" id="button" value="ボタン"> 4 5</body>

上記コードで指定したテキストボックスに入力した文言を、アラートに表示させる方法はありますか?

ちなみに、適応させたいコードの全体図はこちらです。

html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>値の取得</title> 6 <link rel="stylesheet" type="text/css" href="base.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> 8 <script> 9 $(function(){ 10 // ここに処理を記述// 11 12 }); 13 </script> 14</head> 15<body> 16 <input type="text" id="value"> 17 <input type="button" id="button" value="ボタン"> 18 19</body> 20</html>

css

1@charset "UTF-8"; 2/* reset */ 3body, h1, h2, h3, h4, h5, h6, p, address, 4ul, ol, li, dl, dt, dd, img, form, table, tr, th, td { 5 margin: 0; 6 padding: 0; 7 border: none; 8 font-style: normal; 9 font-weight: normal; 10 font-size: 100%; 11 text-align: left; 12 list-style-type: none; 13 border-collapse: collapse; 14} 15 16textarea { font-size: 100%; vertical-align:middle;} 17img { border-style: none; display: block; } 18hr { display: none; } 19em{font-style: normal} 20input{line-height:auto;vertical-align:middle;} 21strong.more{color:#c30} 22a{text-decoration: none;} 23 24html { 25 26} 27 28body { 29 font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; 30} 31 32* { 33 -webkit-box-sizing: border-box; 34 -moz-box-sizing: border-box; 35 -o-box-sizing: border-box; 36 -ms-box-sizing: border-box; 37 box-sizing: border-box; 38} 39 40/* 上の部分は気にせずここから書く */ 41#wrapper { 42 display: flex; 43 justify-content: center; 44 height: 100vh; 45 align-items: center; 46} 47 48#button { 49 margin: 0 0px; 50 width: 55px; 51 height: 25px; 52 background-color: #f0f0f0; 53 cursor: pointer; 54} 55 56#button p { 57 line-height: 180px; 58 font-size: 30px; 59 text-align: center; 60} 61

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/02/08 07:09

幾らでも考えられますが何がわからないのでしょうか。
Junpeioasis

2021/02/08 07:15

jQueryにて表示させる場合の公文例などご教授頂きたいです。 指定した文言をアラートとして表示させる方法や変数を表示させる方法は調べてもよく出てくるのですが、文言を指定しない、テキストボックスに入力した文言を表示させる、とした場合どう応用したものか、と悩んでいます。宜しくお願いいたします。
plasticgrammer

2021/02/08 07:18

jQueryを使用せずともアラートを表示できますが、 「jQueryで」という指定は、どのような意図があるのでしょうか。 jQueryで動的にイベントを追加してJavascript標準のalertでメッセージを出力すればよいのか、 それとも(無いとは思いますが)jQueryUI等を使用してリッチなメッセージを出したいのですか?
Junpeioasis

2021/02/08 07:27

単に勉強中なもので。(笑)
m.ts10806

2021/02/08 07:29

勉強中、はいいとして肝心のコードを全く書いてないのは如何なものかと。失敗して覚えることのほうが多いですよ。
Junpeioasis

2021/02/08 07:32

素の状態の方がわかりやすいかと思い、まっさらな状態で掲載しておりました。ありがとうございます。
m.ts10806

2021/02/08 07:32

それ以前に「丸投げ」です。
guest

回答1

0

ベストアンサー

alertがwindow.alertなのか、jQueryUI Dialogなのかで多少実装は変わるけどロジックは同じ。
結局固定か可変かの違いで、出力したい文字列を得れば良い。

  1. ボタン押下のイベント捕捉(いやadd/onだから「付与」が正しいか)
  2. テキストボックスのvalue取得
  3. 2.をalertの引数に

window.alertのほうならjQueryである必要はないですね。

投稿2021/02/08 07:22

編集2021/02/08 07:26
m.ts10806

総合スコア80850

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/02/08 07:24

イベント捕捉 value取得(プロパティ) はJavaScriptの基礎です。 調べて出てこない情報ではありません。
m.ts10806

2021/02/08 07:25

個人的にはjQueryUIよりモーダルのほうが見た目はリッチで、レスポンシブもしやすいと思う。
Junpeioasis

2021/02/08 07:30

ありがとうございます。取り組んでみます。
m.ts10806

2021/02/08 07:32

他者からは「ほとんど取り組んでない」と見られていることは認識されますよう。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問