Q&A
課題の内容がわからないのでなんとも言いようがないのですが、『（
h1 要素に対してではなくて）#textに対して、textメソッドを呼び出してください』という意味なのではないですか？
progate（プログラミング学習サービス）でjQueryコース初級編を学習していて、分からなくなりました。
課題に取り組んでいて、これでクリアできるかなと思い、確認して次へを押すと『#textに対して、textメソッドを呼び出してください』と返ってきました。
（下の画像、下中央）
自分の中では、クリアできるコードを書けていると思っていて、どこをどういじればいいのか分からず困っています。
一応、動作としては思ったように出来ているのですが、、、、、
ちなみに、このコースはjavascriptES5です。自分はES6をjqueryを学ぶ前に学習しています。
自分でやってみた事〜
『メソッドを呼び出してください』とあるから、.text();をここかな？と思ったところに入れてみましたが、
うまくいきませんでした。
下画像
どうすればいいか教えて下さい。
javascript
1コード 2$(function() { 3 // 「#change-text」要素に対するclickイベントを作成してください 4 $('#change-text').click(function(){ 5 $('h1').text('ようこそ、progateへ'); 6 7 }); 8 9 10 // 「#change-html」要素に対するclickイベントを作成してください 11 $('#change-html').click(function(){ 12 $('h1').html('<a href="https://prog-8.com/">ようこそ、Progateへ</a>'); 13 }); 14 15});
css
1コード 2.btn{ 3 display: inline-block; 4 cursor: pointer; 5 padding: 8px 30px; 6 background-color: #5dca88; 7 box-shadow: 0px 5px #279C56; 8 border-radius: 3px; 9 color: #fff; 10 font-size: 10px; 11} 12 13.btn:active{ 14 position: relative; 15 top: 5px; 16 box-shadow: none; 17}
html
1コード 2<!DOCTYPE html> 3<html> 4<head> 5 <meta charset="utf-8"> 6 <title>Progate</title> 7 <link rel="stylesheet" type="text/css" href="stylesheet.css"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 9</head> 10<body> 11 <!-- 1つ目の<div>タグに、"change-text"というidをつけてください --> 12 <div id="change-text" class="btn">文字列を変更</div> 13 14 <!-- 2つ目の<div>タグに、"change-html"というidをつけてください --> 15 <div id="change-html" class="btn">HTMLを変更</div> 16 17 <h1 id="text">Hello, World!</h1> 18 19 <script src="script.js"></script> 20 21</body> 22</html>
回答を得て解決出来た内容（以下）
今回、コードを修正したところが２点あります。
1, $('#text').text('ようこそ、Progateへ');と $('#text').html('<a href="https://prog-8.com/">ようこそ、progateへ</a>');にある 対象要素であるh1を#textに変えた事。
２. 1を修正して確認したところ、引数の値が正しくないと返ってきたので よーく見てみるとprogateの頭文字がPであった事に気づく。（自分は小文字にしていた。）
上記の修正で課題クリア出来ました。
〜実は〜
〜に対しての部分に最初#text入れていました。
それで確認すると、引数の値が違うと返ってきた。（その時、引数の値に目をやって『いや、正しいよ』と思った。つまりPとpの違いに気づかなかった） その事が、基礎知識がしっかり定着していない事と合わさり、頭の中で覚えてきた事とか今出されている課題も意味わからない状態に繋がった。
今回の学び
.でスタートできるのは、構文的にOKの時だけです。
method()
.hoge();
って時などです。
前行で、;で処理が終了している時などは、
"."スタートの処理は構文エラーです
ES6を学んで、なぜ、"."スタートのステートメントになるんですか・・・。
ES6やES5とかjQueryの以前に、JavaScriptの基本を勉強をされた方がいいかと。
.でスタートできるのは、構文的にOKの時だけです。
method()
.hoge();
って時などです。
前行で、;で処理が終了している時などは、
"."スタートの処理は構文エラーです。
他の回答者さんも言われている通り、
単語単語ではなく、文全体で捉えて行きましょう。
#testに対して、と明記があるのだから、そこから考えていきましょう。
勉強になりました。
覚えておきます。ありがとうございました。
回答3件
0
私もprogateを一通りクリアしたのでわかるのですが、
progateの問題って大抵progateが用意した正解とばっちりフィットしてないと正解にはなりません。
今回だと、もう皆さんが回答していますが、
ご提示のようなコードでも動作するから問題ないと思ってしまっているのでしょう。
ですがそれはprogateが想定している回答ではないのです、不便ですね。
「#textに対して、textメソッドを呼び出してください」
progateさんは回答を教えてくれています。
でも質問者さんはこうだ！と思っているので
「$('h1').text('ようこそ、progateへ');」
と書いてしまっています。
textメソッドは呼び出してるから別にいいんです。
progateさんは h1なんてどうでもいいから #text にたいして textメソッド使えやと怒っています。
投稿2019/05/29 06:05
総合スコア2341
h1はIDと違って何回も出現しても問題ないからIDで見てねという課題ということですね・・・
質問内容だけではprogateでないと難しい。progateタグかオンライン学習タグ欲しいですね。
横槍失礼します。
progateに対してあれこれ言うわけではありませんが、
やはりそういう部分があるのですね・・・。
以前、質問者さんの中では、
progateにて、flexを使って答えたら、そこはダメだという返答がきたということもあったそうです。
そこらへんは、不便さや、堅苦しさを感じてしまいますね。
各課題に意図はあるのではとは思いますが。
今回は、h1全部ではなく、一意のID付き要素に対して実行してほしい、という意図があるのかもしれません。
「道場編」ならば、画面や動きが同じであれば、自己流でもある程度は許容してくれます。
ですが今回は「初級編」なので、スライドで解説されてる通りに実装しないとまぁ大抵「違います」と怒られます。
不便ですねー。
多分h1でも実装上は問題ないのですが、 progateの初級編では「アウト」になってしまいます（悲しい）
なるほど・・・。
車の免許取る時、第二段階より、第一段階が難しく感じるってのと同じような感覚な気がしますね。
いや、それは違うか 汗
標識正しく覚えてね！こういうふうに運転してね！この道とおってね！っていうのが初級編で、
じゃあ道路運転してみよー！隣で一応見ててあげるね！が道場編ですね！笑（免許もってませんが....)
じゃあ、.on('click', で実装すると「指示通りやりなさい」って怒られるわけですね。不憫・・
.click()使いなさい！とかになりそうw
それはやったことなかったですが、多分怒られそうな気がします・・・笑
あくまでもスライドで教えてあげた方法を遵守してね♡がprogateさんの方針らしーです！
いろいろとありがとうございました。
0
ベストアンサー
そういうときはリファレンスを読みましょう。
指定した要素が持つテキストノードを結合したものを返す。
つまり、呼び出すためには要素を指定する必要があります。
.text()だけでは要素が指定されていません。
自身が入れられたすぐ上に書いてある記述を真似すれば良いかと思います。
js
1 $('h1').text('ようこそ、progateへ');
↑上記はh1タグを要素としてその要素に対してtext()を呼び出す（そして指定のテキストを入れこむ）記述になっています。
問題は**「呼び出してどうするか」**の方ですね。
単に$("要素名").text()と書くと「対象の要素の内部テキストを取得」となり、$("要素名").text('test')のように書くと「対象の要素の内部テキストに指定のテキストを入れこむ」になります。
どちらが求められているかはprogateに指示があるのではないでしょうか？そちらに従ってください。
投稿2019/05/29 05:46
編集2019/05/29 05:48総合スコア80850
あなたの回答
tips
プレビュー
