Q&A
質問本文
on clisk
になってます。
###わからないことできないこと
下のソースのＨＴＭＬのボタンタグのonclickイベントで変化させられない。
###大文字小文字も詳しく調べて直してみましたが、win10 IE11でうまく動作しません。
私の勘違いや記載ミスなどありますでしょうか？
<html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"> function change(){ handle=GetElementByID("change"); if(handle.innerText=="こんばんは"){…もし「handle.innerText」の値が「こんばんは」だったら次の行の処理をしてね handle.innerText="こんにちは"; handle=GetElementByID("change_button"); handle.innerText="変更する"; }…「handle.innerText」の値が「こんばんは」だったときの処理は終わりだよ else{…「if」文が偽と判断したら次の行の処理をしてね handle.innerText="こんばんは"; handle=GetElementByID("change_button"); handle.innerText="もとに戻す"; }…「if」分が偽だったときの処理は終わったよ } </script> <title>用事内容を変更しよう</title> </head> <body> <p id="change"> こんにちは </p> <button id="change_button" onclick="change();"> 変更する </button> </body> </html>
どこの間違えをご指摘いただいているのでしょうか？
回答2件
0
大有りです。
JS
1function change(){ 2 var change = document.getElementById("change"); 3 var button = document.getElementById("change_button"); 4 if(change.innerText=="こんばんは"){ 5 change.innerText="こんにちは"; 6 button.innerText="変更する"; 7 } else { 8 change.innerText="こんばんは"; 9 button.innerText="もとに戻す"; 10 } 11} 12
そもそもJSでは大文字小文字を区別をするので変えないでください。また、コメントの書き方も決まっているため、フォーマット通りに組んでください。
投稿2019/11/26 13:46
編集2019/11/26 23:11
総合スコア10429
大文字小文字も調べて直したつもりですが、間違っていましたね。すみませんでした。ただ、documentメソッドは省略できるということですか？すべにうえの方の回答でやりたいことはできていますが、省略可能かどうかについてお知らせください。
window.getElementByIdはないかと思います。
質問者文内のコードに無かったのを気づきませんでした。
修正しました。
コードの修正とコメントありがとうございます。やはりオブジェクトの指定は大切ですね。
0
ベストアンサー
<html> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"> function change() { var handle = document.getElementById('change'); if (handle.innerText == 'こんばんは') { handle.innerText = 'こんにちは'; handle = document.getElementById('change_button'); handle.innerText = '変更する'; } else { handle.innerText = 'こんばんは'; handle = document.getElementById('change_button'); handle.innerText = 'もとに戻す'; } } </script> <title>用事内容を変更しよう</title> </head> <body> <p id="change">こんにちは</p> <button id="change_button" onclick="change();">変更する</button> </body> </html>
投稿2019/11/26 14:18
総合スコア279
varで変数を指定するのは、明示的にだと思っていましたが、必須と考えるべきですか？
この場合無くても問題ないです。（宣言しないと文法違反なのかも？）
私もjavascriptはちゃんと勉強したことないのであれですが、明示的にというよりも癖ですね。
重複して宣言した時に意図しない動きになるので、癖でつけてます。
といってもエラー出してくないので厄介なのですが、、
今風だとverの代わりにletを使うようですね。letだとエラーを出してくれる？みたいです。
constもあるので調べてみてください。
今回の場合varかどうかよりも、getElementByIdがdocumentメソッドの中にあるということですね？
```
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<script type="text/javascript">
function change() {
let change = document.getElementById('change');
let change_button = document.getElementById('change_button');
if (change.innerText == 'こんばんは') {
change.innerText = 'こんにちは';
change_button.innerText = '変更する';
} else {
change.innerText = 'こんばんは';
change_button.innerText = 'もとに戻す';
}
}
</script>
<title>用事内容を変更しよう</title>
</head>
<body>
<p id="change">こんにちは</p>
<button id="change_button" onclick="change();">変更する</button>
</body>
</html>
```
こんな感じにしてもわかりやすいかも
そうです。documentのメソッドです。
ざっくり言うとdocumentの中に
<html>
</head>
<body>
<p id="change">こんにちは</p>
<button id="change_button" onclick="change();">変更する</button>
</body>
</html>
これが入ってます。
document.getElementById('change');は
documentの中の要素をIDを指定してゲットするとなりますね。
丁寧な回答をありがとうございます。documentはメソッドで、getElementByIdはプロパティでよかったですか？
documentはオブジェクト
getElementByIdはメソッドですね。
プロパティは要素の事なのでheadとかbodyを指します。
ありがとうございます。ＪａｖａＳｃｒｉｐｔはオブジェクトとメソッドでしたね。下の方は、オブジェクトの表記をしていませんが、オブジェクトを省略可能なのでしょうか？
いきなりメソッドだけ書いてもどのオブジェクトのメソッドか判断できませんのでオブジェクトは省略できません。
change.innerText = 'こんにちは'; が省略しているように見えるかもしれませんが、それは勘違いです。
changeは
その上のlet change = document.getElementById('change');で代入しているので
document.getElementById('change')で取得した要素が入っています。
その要素を書き換えています。
そうですよね。でも、asuchi0819さんの回答では、documentオブジェクトが表記されていません。そこで、documentオブジェクトだけは省略可能なのかなぁと思ったのです。実際にはテストをしていないのでなんともですけど。どのように考えるのが望ましいですか？
> documentオブジェクトだけは省略可能なのかなぁと思ったのです。
この場合、window.getElementById()が呼ばれます（が、そのようなメソッドは存在しなさそうです）。
蛇足にはなりますが、解釈違いになると、思わぬ挙動を生むので、一応コメントです。
> varで変数を指定するのは、明示的にだと思っていましたが、必須と考えるべきですか？
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var
junziさんの仰る通り、今回はいらないですが、（グローバルの他の箇所に同じ名前の変数宣言がないため）記事にある通り、varないし、let、constで定義しないと、"グローバル変数"となってしまいます。
ようは、そのローカルスコープの外側のスコープの変数となるので、仕様を知らないで使うと思わぬ挙動になります。
（グローバル変数なのに、ローカルで値を変えたら、別のローカルスコープでも値が変わってしまった、など）
なので、必須云々ではなく、状態が変わるということです。
documentオブジェクトを省略すると、windowオブジェクトが呼ばれること、変数のスコープのこと、丁寧に解説ありがとうございます。他に何か注意をしなければならないことはありますか？この際ですからＨＴＭＬとＪａｖａＳｃｒｉｐｔの連携のことや、ＪａｖａＳｃｒｉｐｔの文法などよくありそうな、今後私が気を付けた方がよさそうなこともご教授ください。
phpsyoshinsyaさん>
とにかく、基本をまず習得すればいいと思います。
細かいとこはいろいろあれど、ここで話せるような内容ではないので、上記でしか言いようがありません。
そうですね。基本に忠実に頑張ります、今回はありがとうございました。
あなたの回答
tips
プレビュー
