Right now I have a page layout that is styled with CSS.

On this page there is a toggle that should switch between 2 pages with different content and CSS content (for example there are 2 boxes either side of the toggle that change color dependant on what is selected)

What is the best way to handle this?

Right now I've found a onClick event that should do it like a button, but it doesn't seem to work at all

 changeText(){
    var pageText=document.getElementByID("page1");
    if (pageText.innerHTML === "Some text"){
    pageText.innerHTML = "Swapped Text";
    } else {
    pageTxt.innerHTML = "Some text"
    }

CodePudding user response：

one way can be to have the content of pages inside two div

and write a function that toggle visibility for different pages based on visibility of other pages

function changePage() {
    var page1 = document.getElementById("page1");
    var page2 = document.getElementById("page2");
    
    page1.style.display = (page1.style.display === 'none') ? 'block': 'none';
    page2.style.display = (page1.style.display === 'none') ? 'block': 'none';
    
}

#page1 {
  display: block;
}

#page2 {
  display: none;
}

<div id="page1">
  the content of page1
</div>

<div id="page2">
  the content of page2
</div>

<button onClick="changePage()">change page</button>

CodePudding user response：

You can use selectors to get to your HTML elements :

const page = document.querySelector("#page")

let dark = false

toggleLayout = () => {
  dark = !dark
  page.classList = dark ? "dark" : "light"
}

.light {
  padding: 1em;
  white-space: pre-wrap;
  font-family: sans-serif;
  background-color: silver;
  color: black;
}

.dark {
  padding: 1em;
  white-space: pre-wrap;
  font-family: sans-serif;
  color: silver;
  background-color: black;
}

.layout3 {
  padding: 1em;
  background: #FF5000;
  font-family: sans-serif;
}

<button onclick="toggleLayout()">Change layout</button>
<div id="page" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare bibendum enim rutrum rutrum. Proin suscipit leo ut turpis dignissim, ut laoreet neque volutpat. Ut vulputate rhoncus orci, eget interdum est scelerisque at. Integer non orci luctus, porta augue ac, semper libero. Proin nulla elit, tincidunt in neque vitae, luctus placerat lectus. Sed a mattis magna, eu lacinia purus. Nulla commodo tortor et pulvinar facilisis. Donec vulputate lectus eget tellus pellentesque, vitae tincidunt odio vulputate.

In maximus, turpis sed mollis luctus, justo nibh auctor nisi, quis ultrices ante nulla a eros. Curabitur commodo magna nulla. Nam risus metus, convallis in accumsan sit amet, dapibus vitae augue. Nulla a tortor at lectus porta iaculis sit amet eu mauris. Donec commodo, tortor eget viverra semper, mauris diam mollis sapien, feugiat interdum sem tellus ut velit. Duis quis est dictum ligula pharetra aliquam vitae in ante. Etiam eu commodo ex, suscipit convallis nisi. Nullam gravida ut est quis blandit. Etiam gravida erat viverra rutrum dictum. Duis hendrerit diam eget justo sodales commodo. Nam scelerisque ut justo vitae semper. Etiam blandit nisl tellus, a vestibulum ante imperdiet id. Proin quis nibh neque. Phasellus tempus felis quam, nec tincidunt metus placerat dictum. Nam nulla nulla, accumsan ultrices mauris a, consectetur elementum ipsum. Aenean ullamcorper ipsum et dui pharetra sodales.

Sed et egestas magna. Fusce sagittis gravida est cursus dapibus. Praesent sapien nunc, dignissim sit amet convallis a, hendrerit vel neque. Donec dapibus justo at nunc cursus, non tristique enim venenatis. Donec eu nulla eget ex ultricies vestibulum sed ut dui. Nullam augue sapien, porttitor vel elit efficitur, placerat laoreet urna. Donec aliquam, urna sit amet laoreet tristique, dui dolor porttitor felis, sit amet faucibus tortor enim at tellus. Praesent congue vitae est vel facilisis.

Maecenas tincidunt pharetra tortor et lobortis. Nunc sed lorem vitae arcu finibus aliquet sed in augue. Donec consequat neque ac mi malesuada fringilla. Nullam sagittis dignissim turpis, sed gravida diam rhoncus tincidunt. Sed sollicitudin, tortor eu fringilla tincidunt, lectus magna tempor augue, quis condimentum magna eros tincidunt lectus. Nunc ac massa sit amet nulla dapibus tristique. Nulla sodales nec purus quis semper. In convallis placerat ex ut cursus. Morbi vehicula egestas dolor vitae maximus.

Morbi eu erat congue, faucibus odio id, ultrices ipsum. Morbi id nunc cursus, porttitor ligula id, commodo magna. Fusce egestas vitae est sed hendrerit. Duis sit amet nulla cursus, porta libero efficitur, mattis eros. Integer consequat purus blandit, varius arcu sed, placerat nisl. Nulla nec sem nisi. Etiam sed leo id mi rhoncus luctus a nec mauris.
</div>