Ajaxを使用して画像にマウスオーバーした後にテキストを表示

私はマウスオーバーして画像を表示するためにこのコードを記述しました。そこのウェブサイト上に3個のイメージがあり、それぞれの画像は、独自のテキスト情報を持っている：Ajaxを使用して画像にマウスオーバーした後にテキストを表示

var resOb = new XMLHttpsRequest(); 
window.onload = function() { 
document.getElementsByTagName("img").onmouseover = 
function sndReq(0) { 
} 
document.getElementsByTagName("img").onmouseover = 
function sndReq(1) { 
} 
document.getElementsByTagName("img").onmouseover = 
function sndReq(2) { 
} 
    } 
function sndReq(i) { 
switch (i) { 

case 0: 
resOb.open('get', 'info0.txt', true); 
break; 

case 1:  
resOb.open('get', 'info1.txt', true); 
break; 

case 2: 
resOb.open('get', 'info2.txt', true); 
break; 

resOb.onreadystatechange = function() { 
handleResponse(i); 
    } 
    } 
function handleResponse() { 
document.getElementById("info0").innerHTML = 
    resOb.responseText; 
}

悲しいことに、それは動作しません、と私は、問題がどこにあるかを見つけることができませんよ。助けが必要です。ここで

HTML出力

<!DOCTYPE html> 
<html lang="de"> 
<head> 
<meta charset="utf-8"> 
<title>AJAX</title> 
<meta name="viewport" content= 
"width=device-width; initial-scale=1.0"> 
    <link rel="stylesheet" type="text/css" 
    href="lib/css/stil.css" /> 
    <script type="text/javascript" 
src="lib/js/ajaxeinsendeaufgabe2.js"></script> 
</head> 
<body> 
<h1>Zusatzinformationen</h1> 
<table> 
<tr> 
<td><img class="img" src="img/b1.jpg" data-file="info0" /></td> 
    <td id="info0"></td> 
    </tr> 
    <tr> 
    <td><img class="img" src="img/b2.jpg" /></td> 
    <td id="info1"></td> 
    </tr> 
    <tr> 
    <td><img class="img" src="img/b3.jpg" /></td> 
    <td id="info2"></td> 
    </tr> 
    </table> 
    </body> 
    </html>

出典

2016-09-16 Marco

は難しい「info0」をコード化している私あなたのハンドル応答は使用されません。それは次のようになります。

function handleResponse (i) { 
    document.getElementById("info"+i).innerHTML = 
    resOb.responseText; 
}

また、あなたがあなたと同じことを行うことができ、スイッチケースを必要としない：ここ

resOb.open('get','info'+i+'.txt',true);

はhttps://jsfiddle.net/pyr2447k/6/ は、その1つの意志かどうかを確認してみてくださいリファクタリングフィドルへのリンクです作業。

出典

2016-09-16 20:12:36

でも、それでも機能しません。 – Marco

何かエラーがありますか？あなたのonmouseoverは解雇されていますか？また、ページが読み込まれたときにテキストが読み込まれ、マウスオーバー時にajaxが読み込まれないようにすることもできます。キャッシングを実行しない限り、ユーザーは毎回電話をかけることはありません。 –

私はエラーが発生しましたScript1010：期待された識別子ajaxeinsendeaufgabe.js（4,18） – Marco

Ajaxを使用して画像にマウスオーバーした後にテキストを表示

答えて

関連する問題