Question

In: Computer Science

What did I do wrong? When you click on the small caption of the photo, it...

What did I do wrong? When you click on the small caption of the photo, it is supposed to have a call to AJAX that changes the small description of my fav activities to a bigger description.

For example, when you click "cooking" it should change to what I have in the biginfo file but it does not change.

This is the full code. The "biginfo" files I have are done,  don't have anything but the fuller description.  

HTML

_________________

<!DOCTYPE html>

<html>

<head>
<title>Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
.onPic{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
font-size: 12px;
}
</style>
</head>

<body>

<h2 class="w3-center">My Favorite Actitivies</h2>

<div class="w3-content w3-section" style="max-width:500px">
<div class="mySlides">
<img src="cooking.jpg" style="width:100%">
<button class="onPic" type="button" onclick="loadDoc1()">Cooking</button>
  
</div>

  
<div class="mySlides">
<img src="lacrosse.jpg" style="width:100%">
<button class="onPic" type="button" onclick="loadDoc2()">Lacrosse</button>
</div>
  
<div class="mySlides">
<img src="jogging.jpg" style="width:100%">
<button class="onPic" type="button" onclick="loadDoc3()">Jogging</button>
</div>
  
<div class="mySlides">
<img src="music.jpg" style="width:100%">
<button class="onPic" type="button" onclick="loadDoc4()">Listening to music</button>
</div>
  
<div class="mySlides">
<img src="dog.jpg" style="width:100%">
<button class="onPic" type="button" onclick="loadDoc3()">Playing with my dog</button>
</div>
  
<div class="mySlides">
<img src="tv.jpg" style="width:100%">
<button class="onPic" type="button" onclick="loadDoc4()">Watching TV</button>
</div>
  

</div>

<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
  
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 7000); // Change image every 2 seconds
}
  
function loadDoc1() {
var xhttp1 = new XMLHttpRequest();
xhttp1.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp1.open("GET", "biginfo1.txt", true);
xhttp1.send();
}

  
function loadDoc2() {
var xhttp2 = new XMLHttpRequest();
xhttp2.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp2.open("GET", "biginfo2.txt", true);
xhttp2.send();
}
  
  
function loadDoc3() {
var xhttp3 = new XMLHttpRequest();
xhttp3.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp3.open("GET", "biginfo3.txt", true);
xhttp3.send();
}

function loadDoc4() {
var xhttp3 = new XMLHttpRequest();
xhttp3.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp3.open("GET", "biginfo4.txt", true);
xhttp3.send();
}
function loadDoc5() {
var xhttp3 = new XMLHttpRequest();
xhttp3.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp3.open("GET", "biginfo5.txt", true);
xhttp3.send();
}
function loadDoc6() {
var xhttp3 = new XMLHttpRequest();
xhttp3.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp3.open("GET", "biginfo6.txt", true);
xhttp3.send();
}

</script>

</body>
</html>

BIGINFO1

--------------------

"I like to cook because it is fun"

Solutions

Expert Solution

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

NOTE :

  • Images are used for demonstration purpose only.
  • Here need to add an either div or para with id=demo load the contents from the file.

Here a new web page with name "ajax1.html" is created, which contains following code.

ajax1.html :

<!DOCTYPE html>

<html>

<head>

<!-- title for web page -->

<title>Slideshow</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">

<!-- link is used to refer to external stylesheet -->

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<!-- internal style -->

<style>

.mySlides {display:none;}

.onPic{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: black;

font-size: 12px;

}

</style>

</head>

<body>

<h2 class="w3-center">My Favorite Actitivies</h2>

<div class="w3-content w3-section" style="max-width:500px">

<div class="mySlides">

<img src="cooking.jpg" style="width:100%">

<button class="onPic" type="button" onclick="loadDoc1()">Cooking</button>

</div>

<div class="mySlides">

<img src="lacrosse.jpg" style="width:100%">

<button class="onPic" type="button" onclick="loadDoc2()">Lacrosse</button>

</div>

<div class="mySlides">

<img src="jogging.jpg" style="width:100%">

<button class="onPic" type="button" onclick="loadDoc3()">Jogging</button>

</div>

<div class="mySlides">

<img src="music.jpg" style="width:100%">

<button class="onPic" type="button" onclick="loadDoc4()">Listening to music</button>

</div>

<div class="mySlides">

<img src="dog.jpg" style="width:100%">

<button class="onPic" type="button" onclick="loadDoc3()">Playing with my dog</button>

</div>

<div class="mySlides">

<img src="tv.jpg" style="width:100%">

<button class="onPic" type="button" onclick="loadDoc4()">Watching TV</button>

</div>

<div id="demo"></div>

</div>

<script>

var myIndex = 0;

carousel();

function carousel() {

var i;

var x = document.getElementsByClassName("mySlides");

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

myIndex++;

if (myIndex > x.length) {myIndex = 1}

x[myIndex-1].style.display = "block";

setTimeout(carousel, 7000); // Change image every 2 seconds

}

function loadDoc1() {

var xhttp1 = new XMLHttpRequest();

xhttp1.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;

}

};

xhttp1.open("GET", "biginfo1.txt", true);

xhttp1.send();

}

function loadDoc2() {

var xhttp2 = new XMLHttpRequest();

xhttp2.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;

}

};

xhttp2.open("GET", "biginfo2.txt", true);

xhttp2.send();

}

function loadDoc3() {

var xhttp3 = new XMLHttpRequest();

xhttp3.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;

}

};

xhttp3.open("GET", "biginfo3.txt", true);

xhttp3.send();

}

function loadDoc4() {

var xhttp3 = new XMLHttpRequest();

xhttp3.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;

}

};

xhttp3.open("GET", "biginfo4.txt", true);

xhttp3.send();

}

function loadDoc5() {

var xhttp3 = new XMLHttpRequest();

xhttp3.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;

}

};

xhttp3.open("GET", "biginfo5.txt", true);

xhttp3.send();

}

function loadDoc6() {

var xhttp3 = new XMLHttpRequest();

xhttp3.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;

}

};

xhttp3.open("GET", "biginfo6.txt", true);

xhttp3.send();

}

</script>

</body>

</html>

======================================================

Output : Open web page ajax1.html in the browser and will get the screen as shown below

Screen 1 :ajax.html

Screen 2:Screen when clicked on button

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

venereology answered 14 hours ago
Next > < Previous

Related Solutions

What do you think the entrepreneur Sam Walton did wrong in his career?
What do you think the entrepreneur Sam Walton did wrong in his career?
What do you think the entrepreneur did wrong? according to the book The Airbnb Story by...
What do you think the entrepreneur did wrong? according to the book The Airbnb Story by Leigh Gallagher
What am i doing wrong. I want for the program to run through then when it...
What am i doing wrong. I want for the program to run through then when it gets to "do you want to play again?enter yes or no" if they choose yes I want it to run again if they choose no then end. def play(): print("Welcome to the Game of Life!") print("A. Banker") print("B. Carpenter") print("C. Farmer") user_input = input("What is your occupation? ").upper() if user_input == "A": money = 100 elif user_input == "B": money = 70 elif user_input...
I did most of this problem theres only a part that I keep getting wrong or...
I did most of this problem theres only a part that I keep getting wrong or not getting. I need help figuring out the blank boxes. that says Purchasing and Power and Question 2. Rest is done Sequential Method Jasmine Company manufactures both pesticide and liquid fertilizer, with each product manufactured in separate departments. Three support departments support the production departments: Power, General Factory, and Purchasing. Budgeted data on the five departments are as follows: Support Departments Producing Departments Power...
Do you have an example when policy implementation went wrong and what would you have done...
Do you have an example when policy implementation went wrong and what would you have done differently if you were the leader of the development and implementation?
Python 3 What to fix: When i click the clear button it clears everything but not...
Python 3 What to fix: When i click the clear button it clears everything but not the sold by field import tkinter as tk from tkcalendar import DateEntry from openpyxl import load_workbook window = tk.Tk() window.title("daily logs") # window.resizable(0,0) # labels tk.Label(window, text="Bar code").grid(row=0, sticky="W", pady=20, padx=20) tk.Label(window, text="Products failed").grid(row=1, sticky="W", pady=20, padx=20) tk.Label(window, text="Money Lost").grid(row=2, sticky="W", pady=20, padx=20) tk.Label(window, text="sold by").grid(row=3, sticky="W", pady=20, padx=20) tk.Label(window, text="Failed date").grid(row=4, sticky="W", pady=20, padx=20) # entries barcode = tk.Entry(window) product = tk.Entry(window) money...
Do you feel that HP did anything wrong in putting the smart chip in its ink...
Do you feel that HP did anything wrong in putting the smart chip in its ink cartridges?
I am getting 7 errors can someone fix and explain what I did wrong. My code...
I am getting 7 errors can someone fix and explain what I did wrong. My code is at the bottom. Welcome to the DeVry Bank Automated Teller Machine Check balance Make withdrawal Make deposit View account information View statement View bank information Exit          The result of choosing #1 will be the following:           Current balance is: $2439.45     The result of choosing #2 will be the following:           How much would you like to withdraw? $200.50      The...
hi i do not know what is wrong with my python code. this is the class:...
hi i do not know what is wrong with my python code. this is the class: class Cuboid: def __init__(self, width, length, height, colour): self.__width = width self.__length = length self.__height = height self.__colour = colour self.surface_area = (2 * (width * length) + 2 * (width * height) + 2 * (length * height)) self.volume = height * length * width def get_width(self): return self.__width def get_length(self): return self.__length def get_height(self): return self.__height def get_colour(self): return self.__colour def set_width(self,...
(Note: I did my assignment with these answers but 4 of them is wrong and 6...
(Note: I did my assignment with these answers but 4 of them is wrong and 6 are right. Please tell me which answer is wrong and what's the right answer for them) 1-One of the most important features of a filing and record keeping system is that it works for you and meets your needs. (True) 2-Which one of these is the best way to prevent foreclosure? Save at least 1% of your home’s purchase price annually (ANSWER)-Refinance as soon...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT