私には、手紙に従わなければならない課題があります。JavaScript コードの上部にあるコメントを読んで、この割り当てに関する制限を確認してください。ほとんどの機能は非常にうまくレイアウトされ、コメントが付けられていますが、ページが読み込まれると機能しません。HTML、CSS、JavaScript を含めました。あなたの提案が私の制限から外れないように、答えを出す前にJavaScriptの上部にあるコメントを読んでください。私がこれについてばかげているなら申し訳ありませんが、そうするつもりはありません。ご協力ありがとうございました。ありがとう、ジェイソン
ps 返される唯一のエラーは次のとおりです。
Warning: TypeError: function showTip does not always return a value
Source File: file:///G:/WEB%20215/Moodle%20Assignments/Assignment%206/Jason_McCoy_6/js.js
Line: 40
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tool Tips</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="js.js" type="text/javascript"></script>
</head>
<body>
<h1>Tool Tips</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="http://en.wikipedia.org/wiki/Randy_Rhoads" class="tip">Randy Rhoads
<span> Randy Rhoads blah blah blah</span></a>Sed tincidunt pulvinar elit, ac porta dolor feugiat.
<a href="http://en.wikipedia.org/wiki/Ty_Tabor" class="tip">Ty Tabor
<span> Ty Tabor blah blah blah</span></a>Nunc quis eros ac ante convallis pharetra.
<a href="http://en.wikipedia.org/wiki/Andy_Timmons" class="tip">Andy Timmons
<span> Andy Timmons blah blah blah</span></a>In nec justo libero, a convallis quam.</p>
</body>
</html>
CSS
/* styles the anchors that have tooltips*/
.tip {
font-weight: bold;
border-bottom: 1px dotted #333;
cursor: help;
position: relative;
color: #600;
}
/* hides all tooltips by default on page load */
.tip span {
display: none;
/* none of these matter now because the tooltips are hidden */
/* when JS unhides the tooltips, these will already be in place */
position: absolute;
top: 1.5em;
left: 0;
background: #fff;
border: 1px solid #333;
width: 100px;
padding: 5px;
color: #333;
}
/* applied by JS to show tips */
.tip span.showTip {
display: block;
}
/* applied by JS to hide tips */
.tip span.hideTip {
display: none;
}
Javascript
// *** USE JAVASCRIPT BEST PRACTICES (ALL FUNCTIONALITY COMES FROM THE EXTERNAL JAVASCRIPT FILE) ***
// *** THIS MEANS THAT THE HTML AND THE CSS ARE NOT TO BE EDITED AT ALL ***
// *** NO <SCRIPT> TAGS ARE TO BE ADDED TO THE HTML ***
// *** NO INLINE JAVASCRIPT IS TO BE ADDED TO THE HTML ***
// *** THE CSS IS TO BE LEFT ALONE, NO CHANGES ARE ALLOWED ***
// *** CANNOT USE ANY JQUERY ***
// *** CANNOT USE INNERHTML ***
// Step 1: Create the ONLOAD event so that the function prepareTips() runs once the page has finished loading
window.onload = prepareTips;
// Step 2: Declare the prepareTips() function
function prepareTips() {
// Step 3: Scan the document looking for all anchor tags
var arrPrepareTipsAnchors = document.getElementsByTagName('a');
// Step 4: Loop thru all the anchor tags
for (var i=0; i<arrPrepareTipsAnchors.length; i++) {
// Step 5: Bind the showTip() function to the anchor tags' MOUSEOVER and ONCLICK events
arrPrepareTipsAnchors[i].onmouseover = arrPrepareTipsAnchors[i].onclick = function() {
showTip(this);
return false;
}
// Step 6: Bind the hideTip() function to the anchor tags' MOUSEOUT event
arrPrepareTipsAnchors[i].onmouseout = function() {
hideTip(this);
return false;
}
}
}
// Step 7: Create a separate function called showTip()
function showTip(anchor) {
// Step 8: Scan the document looking for all anchor tags
var arrShowTipAnchors = document.getElementsByTagName('a');
// Step 9: If a anchor is clicked, the default behavior is canceled (i.e. the link does nothing)
// Step 10: When a mouseover event occurs to an anchor:
// 1) The anchor's classname is changed from the default 'tip' class to the 'showTip' class as described in the CSS File
// 2) The anchor's 'title' attribute is changed to the text that is in between the <span> childNode of each anchor
for (j=0; j<arrShowTipAnchors.length; j++) {
if (arrShowTipAnchors[j].onclick) {
anchor.getAttribute('href');
return false;
}
if (arrShowTipAnchors[j].onmouseover) {
anchor.lastChild.setAttribute('class', 'showTip');
var showTooltip = anchor.lastChild.nodeValue;
anchor.setAttribute('title', showTooltip);
}
}
}
// Step 11: Create a separate function called hideTip()
function hideTip(anchor) {
// Step 12: Scan the document looking for all anchor tags
var arrHideTipAnchors = document.getElementsByTagName('a');
// Step 13: Loop thru all the anchor tags
for(var k=0; k<arrHideTipAnchors.length; k++) {
//Step 14: When a MOUSEOUT event occurs to an anchor:
// 1) The anchor's classname is changed from the default 'tip' class to the 'hideTip' class as described in the CSS File
// 2) The anchor's 'title' attribute is set to null (i.e. the tooltip that appears on the MOUSEOVER disappears on the MOUSEOUT)
if (arrHideTipAnchors[k].onmouseout) {
anchor.lastChild.setAttribute('class', 'hideTip');
var hideTooltip = "";
anchor.setAttribute('title', hideTooltip);
}
}
}
* Javascript を更新 (コードのみ追加、コメントなし) *
window.onload = prepareTips;
var anchors = document.getElementsByTagName('a');
function prepareTips() {
if(!document.getElementsByTagName('a')) return false;
for(var i=0; i<anchors.length; i++){
anchors[i].onclick = showTip;
anchors[i].onmouseover = showTip;
anchors[i].onmouseout = hideTip;
}
}
function showTip(variable) {
this.setAttribute('href', '#');
this.classname = 'showTip';
this.getAttribute('title') ? this.lastChild.nodeValue : this.lastChild.nodeValue;
}
function hideTip(variable) {
this.classname = 'hideTip';
this.getAttribute('title') ? "" : "";
}