How to access a <p> inside three layers of <div> using Javascript?-CodePudding

I'm trying to use Javascript so that a paragraph will alternate between two texts when the user presses a button on the webpage. The problem is that the <p> element I'm trying to manipulate lies within a <div> within a <div> within a <div>.

A low-level mockup of my code can be seen below:

<div id="div1">
  <div id="div2">
    <div id="div3">
      <p>text1</p>
    </div>
  </div>
</div>

All solutions I've found only state what to do if the <p> is within one <div>; solutions which have not worked for me.

Here's my latest attempt:

function translate() {
  var x = document.getElementById("div1").getElementById("div2").getElementById("div3").getElementsByTagName('p')[0];
  if (x.innerHTML === "text1") {
    x.innerHTML = "text2";
  } else {
    x.innerHTML = "text1";
  }
}

How would I get this to work?

Edit: Nothing seems to be working so far. The <div> element all have classes, but that shouldn't affect things, right?

Edit2: My apologies for taking up your time, but I've found the issue was something else entirely. I'd been using a reserved word for my function call this whole time and had somehow never noticed that that was the issue instead. Thanks again to those who answered, and I shall look deeper at my code before posting my next question.

CodePudding user response：

Why not just use

var x = document.getElementById("div3")

If accessing by the Id directly, it does not really matter what the other DIVs are.

CodePudding user response：

If divs are always in that order, you can do it like this:

var x = document.querySelector('#div1 #div2 #div3 p');

CodePudding user response：

You can use document.querySelectorAll to get an array of all p tags on the page.

const pTags = document.querySelectorAll('p')

pTags.forEach((p, i) => {
  if(i % 2 === 0) {
    p.innerHTML = 'text1'
  } else {
    p.innerHTML = 'text2'
  }
})

CodePudding user response：

Instead of Ids, you can be more specific & try the following:

var x = document.querySelector('div > div > div > p')

This will be a very strict implementation & follows the condition without the ids or classes.

CodePudding user response：

Use querySelector in order to use the CSS selector #div3 p which means "pick up the paragraph element that is inside the element that has a div3 id".

Then, as you're just changing a string of text, change either the textContent of that element, or its innerText (there are subtle differences between them.)

const para = document.querySelector('#div3 p');
const button = document.querySelector('button');

button.addEventListener('click', translate);

function translate() {
  if (para.textContent === 'text1') {
    para.textContent = 'text2';
  } else {
    para.textContent = 'text1';
  }
}

<div id="div1">
  <div id="div2">
    <div id="div3">
      <p>text1</p>
    </div>
  </div>
</div>
<button type="button">Translate</button>