Q&A
リンクをクリックしても動きませんでした
とありますが、リンクをクリックした時どうしたいんですか？
やりたいことが書かれていないので答えようがないです
前提・実現したいこと
まず、「天気」という文字列をフォームに入れると、きまった返事が返ってくるのようなことをしていて、「天気」のうちの「天」だけが入力された時に、もしかして．．．と表示したいのです。
発生している問題・エラーメッセージ
「天気」のうちの「天」だけを入力して、もしかして．．．とでましたが、リンクをクリックしても動きませんでした。
エラーメッセージ(エラーはでませんでした)
該当のソースコード
javascript
1function tenki_search() { 2 target2 = document.getElementById('search'); 3 target2.innerHTML = '<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=35.689487&lon=139.691706&name=Tokyo&units=si"></iframe>'; 4} 5 6function hanasu() { 7 target = document.getElementById('hennji'); 8 textbox1 = document.forms.fm2.id_textbox1.value; 9 var tenki1 = '天気'; 10 var tenki2 = '今日の天気'; 11 var tenki3 = 'てんき'; 12 var search_tenki1 = '天'; 13 var search_tenki2 = '気'; 14 if (textbox1 == tenki1 || textbox1 == tenki2 || textbox1 == tenki3) { 15 target.innerHTML = '<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=35.689487&lon=139.691706&name=Tokyo&units=si"></iframe>'; 16 } else if (textbox1 == search_tenki1 || textbox1 == search_tenki2) { 17 target.innerHTML = '<p>もしかして<a oncrick="tenki_search()" style="background-color :#ffff00;" href="javascript:void(0);">今日の天気</a></p>'; 18 } else { 19 target.innerHTML = '<p>お答えできません。</p>'; 20 } 21} 22
html
1<FORM name="fm2"> 2 <div class="cp_iptxt"> 3 <input size="20" type="text" name="Z" style="background:#ffffff;" name="textbox" id="id_textbox1"> 4 <input type="button" value="送信" onclick="hanasu()" class="btn btn-primary"> 5 <p>返事</p><br> 6 <div id="hennji">ここに返事が表示されます。</div> 7 <div id="search_1"></div> 8 </div> 9 </div> 10 </FORM>
補足情報
googlechromeで試しました。
説明が足りないところがあるかもしれませんがよろしくお願いします。
---追記
javascript
1function tenki_search() { 2 target2 = document.getElementById('search'); 3 target2.innerHTML = '<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=35.689487&lon=139.691706&name=Tokyo&units=si"></iframe>'; 4} 5 6function hanasu() { 7 target = document.getElementById('hennji'); 8 textbox1 = document.forms.fm2.id_textbox1.value; 9 var tenki1 = '天気'; 10 var tenki2 = '今日の天気'; 11 var tenki3 = 'てんき'; 12 var search_tenki1 = '天'; 13 var search_tenki2 = '気'; 14 if (textbox1 == tenki1 || textbox1 == tenki2 || textbox1 == tenki3) { 15 target.innerHTML = '<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=35.689487&lon=139.691706&name=Tokyo&units=si"></iframe>'; 16 } else if (textbox1 == search_tenki1 || textbox1 == search_tenki2) { 17 target.innerHTML = '<p>もしかして<a onclick="tenki_search()" style="background-color :#ffff00;" href="javascript:void(0);">今日の天気</a></p>'; 18 } else { 19 target.innerHTML = '<p>お答えできません。</p>'; 20 } 21}
html
1<!DOCTYPE html> 2 3<head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <script type="text/javascript" src="../js/main.js"></script> 6 <title> わーい</title> 7</head> 8 9<body> 10 11 <FORM name="fm2"> 12 <div class="cp_iptxt"> 13 <input size="20" type="text" name="Z" style="background:#ffffff;" name="textbox" id="id_textbox1"> 14 <input type="button" value="送信" onclick="hanasu()" class="btn btn-primary"> 15 <p>返事</p><br> 16 <div id="hennji">ここに表示されます。</div> 17 <!--<div id="hennji"> 18 --> 19 <div id="search_1"></div> 20 </div> 21 </div> 22 </FORM> 23 24 <!-- --------------------------------- --> 25</body>
回答1件
ベストアンサー
変なところで間違えていてすみません。
onclickに変えても動きませんでした。
どうすればよろしいでしょうか？
質問に変更後のコードと結果確認したものを追記いただけますか？
結果確認とはブラウザ開発ツールのコンソールにエラーが出てないかとか、「動かない」だけではなく、「起きている現象」を確認していただくことです
HTML
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/main.js"></script>
<title> わーい</title>
</head>
<body>
<FORM name="fm2">
<div class="cp_iptxt">
<input size="20" type="text" name="Z" style="background:#ffffff;" name="textbox" id="id_textbox1">
<input type="button" value="送信" onclick="hanasu()" class="btn btn-primary">
<p>返事</p><br>
<div id="hennji">ここに表示されます。</div>
<!--<div id="hennji">
-->
<div id="search_1"></div>
</div>
</div>
</FORM>
<!-- --------------------------------- -->
</body>
javascript
function tenki_search() {
target2 = document.getElementById('search');
target2.innerHTML = '<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=35.689487&lon=139.691706&name=Tokyo&units=si"></iframe>';
}
function hanasu() {
target = document.getElementById('hennji');
textbox1 = document.forms.fm2.id_textbox1.value;
var tenki1 = '天気';
var tenki2 = '今日の天気';
var tenki3 = 'てんき';
var search_tenki1 = '天';
var search_tenki2 = '気';
if (textbox1 == tenki1 || textbox1 == tenki2 || textbox1 == tenki3) {
target.innerHTML = '<iframe id="forecast_embed" type="text/html" frameborder="0" height="245" width="100%" src="http://forecast.io/embed/#lat=35.689487&lon=139.691706&name=Tokyo&units=si"></iframe>';
} else if (textbox1 == search_tenki1 || textbox1 == search_tenki2) {
target.innerHTML = '<p>もしかして<a onclick="tenki_search()" style="background-color :#ffff00;" href="javascript:void(0);">今日の天気</a></p>';
} else {
target.innerHTML = '<p>お答えできません。</p>';
}
}
です。
コンソールにエラーが出ていました。コピーしたものを書いておきます。
Uncaught TypeError: Cannot set property 'innerHTML' of null
at tenki_search (main.js:10)
at HTMLAnchorElement.onclick (s.html:1)
main.jsはすべてのjavascriptコードのファイルです。
s.htmlはすべてのHTMLコードのファイルです。
よろしくお願いします。
えっと「質問に追記」お願いします。
コメント欄ではマークダウン使えませんし、他のユーザーの目にもつきにくいです
ごめんなさい。
怒っているわけではないので謝る必要はありませんよ。あくまで淡々と問題解決のことだけを考えていきましょう
質問を更新しました。
> document.getElementById('search');
と書かれていますがhtml上にはsearchという名前のidはないように見受けられます。
ありがとうございます。
動作しました。
あなたの回答
tips
プレビュー
