Need code explaination

JavaScript
#1

Hello everyone, I’m practicing AJAX. The idea of this project is to click on 1 of 2 buttons that will show some different text, the output text depends on which button is clicked. My first part below is my original work and it satisfied my need.

	<p id="output1"></p>
	<p id="output2"></p>
	<div id="click">
		<button id="button1">button 1</button>
		<button id="button2">button 2</button>
	</div>

	<script src="app.js"></script>

FIRST PART:

const p1 = document.getElementById("output1");
const button1 = document.getElementById("button1");
button1.addEventListener("click", loadText);

function loadText() {
	const xhr = new XMLHttpRequest();
	xhr.open("GET", "text.txt", true);
	xhr.onload = () => {
		if (xhr.status == 200) {
			p2.textContent = "";
			p1.textContent = xhr.responseText;
		}
	}
	xhr.send();
}

const p2 = document.getElementById("output2");
const button2 = document.getElementById("button2");
button2.addEventListener("click", loadText2);

function loadText2() {
	const xhr = new XMLHttpRequest();
	xhr.open("GET", "text2.txt", true);
	xhr.onload = () => {
		if (xhr.status == 200) {
			p1.textContent = "";
			p2.textContent = xhr.responseText;
		}
	}
	xhr.send();
}

Then I tried to make it more compact(imagine how hard it will be if I have 5 or 10 buttons do the same function).
So here is my solution:
SECOND PART:

const buttons = document.getElementById("click");
buttons.addEventListener("click", click);

function click (event) {
	//dynamically select a button by  event delegation
	const target = event.target;	
	const xhr = new XMLHttpRequest();

	//check which exactly button is clicked
	if (target.id == "button1") {
		xhr.open("GET", "text.txt", true);
	} else if (target.id == "button2") {
		xhr.open("GET", "text2.txt", true);
	}
	//show text
	xhr.onload = () => {
		const p1 = document.getElementById("output1");
		const p2 = document.getElementById("output2");
		if (xhr.status == 200) {
			p1.textContent = xhr.responseText;
		}
	}
	xhr.send();
}

it works! But I don’t understand why it works. Without setting p1/p2.textContent = “”.
The line of code “p1.textContent = xhr.responseText” was “target.textContent = xhr.responseText” but then I realized that I was printing text inside button’s field so that one came up.
p/s: it works if there are 2 buttons only.

#2

In the first version you’re displaying the results in respective paragraph, in the second version you’re always using only the first paragraph, that’s why you don’t need to empty it.

1 Like
#3

thank you, @jenovs!
I have found another way to approach this problem.
HTML:

	<div id="click">
		<button id="button1">button 1</button>
		<button id="button2">button 2</button>
		<button id="button3">button 3</button>
	</div>

	<p id="output"></p>

JS:

	// check which exactly button is clicked
	if (target.id == "button1") {
		xhr.open("GET", "text.txt", true);
	} else if (target.id == "button2") {
		xhr.open("GET", "text2.txt", true);
	} else if (target.id == "button3") {
		xhr.open("GET", "text3.txt", true);
	}	else return;

	// show text
	xhr.onload = () => {
		const output = document.getElementById("output");
		if (xhr.status == 200) {
			output.textContent = xhr.responseText;
		}
	}
#4

You could add data- attribute and get rid of if..else:

// index.html
<div id="click">
  <button id="button1" data-name="text1">button 1</button>
  <button id="button2" data-name="text2">button 2</button>
  <button id="button3" data-name="text3">button 3</button>
</div>

<p id="output"></p>

<script src="app.js"></script>

// app.js
const buttons = document.getElementById("click");
const output = document.getElementById("output");
buttons.addEventListener("click", click);

function click(event) {
  const { name } = event.target.dataset;
  const xhr = new XMLHttpRequest();
  xhr.open("GET", `${name}.txt`, true);

  xhr.onload = () => {
    if (xhr.status == 200) {
      output.textContent = xhr.responseText;
    }
  };

  xhr.send();
}
1 Like
#5

wow, it looks beautiful! I did know about data attribute, but now I see what it can do.
I knew that if…else statement is not a good choice, but my knowledge is limited.
And your code is what I think of, I want xhr.open’s url to be dynamic, but I didn’t know how to do it. Thank you @jenovs!