We Keep Coding

Browser go back to active div in previous page

I want to create a list of button where once clicked, it will shows the respective div as below. And in the div, there is a few links that user can click, and once they clicked the link and go back, it will bring them back to the previous div instead of the first default div. Codes as below.
<div class="tab">
<a class="tablinks btn" href="#m0" id="t0">Item A</a>
<a class="tablinks btn" href="#m1" id="t1">Item B</a>
<a class="tablinks btn" href="#m2" id="t2">Item C</a>
</div>
<div class="tlist">
<div id="m0" class="tdiv" style="display:block;">
LinkA</div>
<div id="m1" class="tdiv" style="display:none;">
LinkB</div>
<div id="m2" class="tdiv" style="display:none;">
LinkC</div>
</div>
I have Javascript codes that will change the display from none to block when user clicked on the Item.
document.getElementById("m0").style.display = "block";
document.getElementById("t"+i).addEventListener('click',divStyle.bind(this,"m"+i),false);
function divStyle(num) {
var i,tdiv,tablinks;
tdiv = document.getElementsByClassName("tdiv");
for (i=0;i<tdiv.length;i++) {
tdiv[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i=0;i<tablinks.length;i++) {
tablinks[i].className = tablinks[i].className.replace(" active","");
}
document.getElementById(num).style.display = "block";
Event.className += "active";
}
//print tab for Item
function printTab(itemnum) {  
for (var y = 0; y < itemnum; y++) {    
tabbtn = document.createElement("a");  
tabbtn.classList.add("tablinks", "btn", "btn-secondary");  
tabbtn.setAttribute("href", "#m" + y);  
tabbtn.setAttribute("id", "t" + y);  
if (y == 0) {   
tabbtn.classList.add("tablinks", "btn", "btn-secondary", "active");  
}  
tabtxt = document.createTextNode("");  //print Item text here 
tabbtn.appendChild(tabtxt);  
document.getElementById("tab").appendChild(tabbtn);
}
//print div for Link
function printLink(num) {
var docFrag = document.createDocumentFragment(); 
for (var i = 0; i < Object.keys(obj).length; i++) {  
moddiv = document.createElement("div");  
moddiv.setAttribute("id", "m" + num);  
moddiv.setAttribute("class", "tdiv");  
moddiv.style.display = "none";  
for (var i = 0; i < Object.keys(obj).length; i++) {   
/*do something here and put link of each item*/   
}   
  
moddiv.appendChild(docFrag);  
document.getElementById("tlist").appendChild(moddiv);  
}
The problem I have now is that when LinkC is clicked, and user then pressed Back button in the browser, browser goes back to the link of the previous specific div, for example, page.html#m2 but shows div m0. I guess this is because I already set document.getElementById("m0").style.display = "block"; by default so it will always go to div m0 but is there other way to make sure the browser will go back to the previous specific div chosen?
My google finding shows people suggesting history.back() but that means I need to create a Back button but I do not want that. I am sure this is not a complicated issue but I can't think anymore on how to solve this.
Any help is very appreciated. Thank you!
Update: I tried to use history.back() and created a button but this also is not working as it still display div m0. :(
Update #2: Tried this on Firefox and it is working though. Is there another way to make sure it can work for different browser?

Please try the bellow code :
<div class="tab">
<a class="tablinks btn active" href="#m0" id="t0">Item A</a>
<a class="tablinks btn" href="#m1" id="t1">Item B</a>
<a class="tablinks btn" href="#m2" id="t2">Item C</a>
</div>
<br>
<div class="tlist">
<div id="m0" class="tdiv" style="display:block;">
LinkA</div>
<div id="m1" class="tdiv" style="display:none;">
LinkB</div>
<div id="m2" class="tdiv" style="display:none;">
LinkC</div>
</div>
<style>
a{color:#333;text-decoration: none;background: #eee;border: 1px solid #333;border-radius:5px;padding:3px;}
.active{color:blue;background: #ccc;}
</style>
<script type="text/javascript">
var tabSelect=(url)=>{
console.log(url);
let hs = url.split('#')[1]||'m0',ts = hs.split('m').join('t');
if(hs!=''){
let tabcs = document.getElementsByClassName('tdiv');
for(let tabc of tabcs){if(tabc.id){tabc.style.display='none';}}
let tabhs = document.getElementsByClassName('tablinks');
for(let tabh of tabhs){if(tabh.id){tabh.className="tablinks btn"}}
let c = document.getElementById(hs);
if(c){c.style.display = 'block';document.getElementById(ts).className="tablinks btn active"}
}
}
window.onhashchange=(i)=>{tabSelect(i.newURL);}
window.onload=()=>{tabSelect(location.href);}
</script>
Hope you will be fine with this code.

Javascript not un-clicking button with link

Newish to javascript, but I do't know why the below is not working. I am trying to use javascript to make a link become active after a button has become clicked.
The user clicks a button that updates the HTML, changes the class and adds a html link. The code works the first time -- the HTML is updated correctly. However if the user decides to un-click the button nothing happens.
Javascript:
function agree() {
let agreement = document.getElementById("agreement");
let agree = document.getElementById("agree");
agree.onclick = () => {
if (agree.value === true) {
agreement.innerHTML = `
<button id="agree" class="agree--no" value="false"></button>I agree
<div class="btn--no-schedule">
<a href="#" > No SCHEDULE </a>
</div> `
} else {
agreement.innerHTML = `
<button id="agree" class="agree--checked" value="true"><i class="fas fa-lg fa-check-square"></i></button>I agree
<div class="btn--agree-schedule">
<a href="http://google.com" > yes SCHEDULE </a>
</div> `
}
}
};
HTML
<div id="agreement">
<button id="agree" class="agree--no" value="false"></button>I agree
<div class="btn--no-schedule">
<a href="#" > SCHEDULE </a>
</div>
</div>
I also tried
<button onclick=“agree();” id="agree" class="agree--no" value="false"></button>
but get a type error agree() is not a function.
Any help would be appreciated

There are two errors here.
First, the click event is lost when you reset the agreement's innerHTML, second, agree.value is a string, and thus will never be "=== true".
There are multiple ways of fixing it. One way is changing the innerHTML part so the event isn't lost. Also, changing the condition to === 'true'
Like so:
HTML:
<div id="agreement">
<button id="agree" class="agree--no" value="false"></button>I agree
<div id="schedule-btn" class="btn--no-schedule">
<a href="#" > SCHEDULE </a>
</div>
</div>
JS:
function agree() {
const agreeBtn = document.getElementById("agree");
const scheduleBtn = document.getElementById("schedule-btn");
agreeBtn.onclick = () => {
if (agreeBtn.value === "true") {
agreeBtn.value = false;
scheduleBtn.innerHTML = `
<div class="btn--no-schedule">
<a href="#" > No SCHEDULE </a>
</div>
`;
} else {
agreeBtn.value = true;
scheduleBtn.innerHTML = `
<div class="btn--agree-schedule">
<a href="http://google.com" > yes SCHEDULE </a>
</div>
`;
}
};
}
Edit: I tried to alter your code as little as possible

Try this code:
function ChangeContent(checkbox) {
var el = document.getElementsByClassName("schedule-agreement")[0];
(checkbox.checked) ? el.innerText = "No SCHEDULE": el.innerText = "Yes SCHEDULE"
}
<div id="agreement">
<input type="checkbox" onchange="ChangeContent(this)"> I agree
<div>
SCHEDULE
</div>
</div>
Explanation:
First of all, add a change event listener to the input checkbox. Then, whenever it is run, check if it is checked. If it is, change the link's innerText to "No SCHEDULE", otherwise, change it to "Yes SCHEDULE".
If you need to use a button, then I would recommend adding a click event listener (or an onclick inline event listener), and changing the link innerText ONLY - not the whole HTML.
In that case, here's a separate demo:
var isChecked = false
function ChangeContent() {
isChecked = !(isChecked)
if (isChecked) {
document.getElementsByClassName("agree")[0].innerText = "✔️ I agree"
document.getElementsByClassName("schedule-agreement")[0].innerText = "No SCHEDULE"
} else {
document.getElementsByClassName("agree")[0].innerText = "❌ I agree"
document.getElementsByClassName("schedule-agreement")[0].innerText = "Yes SCHEDULE"
}
}
<div id="agreement">
<button class="agree" onclick="ChangeContent()">I agree</button>
<div class="btn--no-schedule">
SCHEDULE
</div>
</div>

Toggle class with JS - Only change the actual position

I have a problem with my code... I want to show a specific FA icon when I press a button and different when I press it again. (Attach pic.):
But when I press the button, the changes are made to all the buttons... I think that the problem is in the for, but I don't have an idea how to solve it.
<script>
function MostrarObra(){
var Icon = document.getElementsByTagName('i');
for (i = 0; i < Icon.length; i++) {
Icon[i].classList.toggle('fa-angle-double-down');
Icon[i].classList.toggle('fa-angle-double-up');
}
};
</script>
<div class="card-header p-0" id="headingTwo">
<button onclick="MostrarObra()" class="button w-100 text-left" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<span class="h5 font-weight-bold"> <i class="fas fa-angle-double-down mr-2"></i> Obra PACE Sarmiento</span>
</button>
</div>

When you call document.getElementsByTagName('i') you get all elements i in the document. That's why all buttons change.
You could pass the button that is triggering the event to your function and start looking for the i element from it.
<script>
function MostrarObra(element) {
const icon = element.querySelector('i');
icon.classList.toggle('fa-angle-double-down');
icon.classList.toggle('fa-angle-double-up');
}
</script>
[...]
<button onclick="MostrarObra(this)">[...]</button>

Get element by classname inside certain div

I am trying to click some buttons in a page which has this html code
<div class="a">
<span>
<a class="b" role="button">test</a>
</span>
</div>
So what i've tried is to take ONLY the div's class a
var buttons = document.getElementsByClassName('a').getElementsByClassName('b');
for(var i = 0; i <= buttons.length; i++)
buttons[i].click();
Is there anyway to get the button with class name b but Only the one that is inside the div with class name a ??
P.S. i have also tried and this
var buttons = document.getElementsByClassName('a').getElementsByTagName('span').getElementsByClassName('b');
for(var i = 0; i <= buttons.length; i++)
buttons[i].click();
But i get an empty array [ ] as a response when I console.log(buttons)

You can use querySelector to overcome the issue.
document.querySelectorAll("div.a a.b");

You can use jquery and do
var buttons = $('.a > .b');

Here's an XPath solution:
let res = document.evaluate('//*[#class="a"]//*[#class="b"]',document,null,XPathResult.ANY_TYPE,null);
res.iterateNext().click();
<div class="a">
<span>
<a class="b" role="button" onclick="console.log('clicked!')">test</a>
</span>
</div>
Unfortunately Internet Explorer still doesn't support the XPath API.

Since only one div will be assigned the class='a', you can either supply an ID instead, or, you can do this :
var spans = document.getElementsByClassName('a')[0].getElementsByTagName('span');
// [0] indicates the first element with the class='a'
for(var i = 0; i < spans.length; i++) {
spans[i].getElementsByClassName('b')[0].click();
}
<div class="a">
<span>
<a class="b" role="button" href="javascript:void(0)" onclick="console.log(this.innerHTML+' was clicked !')">test 1</a>
</span>
<span>
<a class="b" role="button" href="javascript:void(0)" onclick="console.log(this.innerHTML+' was clicked !')">test 2</a>
</span>
<span>
<a class="b" role="button" href="javascript:void(0)" onclick="console.log(this.innerHTML+' was clicked !')">test 3</a>
</span>
</div>
This works perfectly, here it is : https://jsfiddle.net/nd8m7mms/4/

How to set `aria-disabled` as true using JavaScript

I have no idea about JS. But there is needed one line of code in my Ruby. I have the below html.
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button class="otherButtonClass ui-state-hover ui-state-focus" type="button" role="button" aria-disabled="false">
<button class="otherButtonClass" type="button" role="button" aria-disabled="false" style="display: none;">
<button class="cancelButtonClass" type="button" role="button" aria-disabled="false">
</div>
</div>
I want JS code to make the first and second button to make them visible. What would be the code?
Please help.

http://jsfiddle.net/SQ7SH/1/
var buttons = document.querySelectorAll('.ui-dialog-buttonset button');
buttons[0].setAttribute('aria-disabled', true);
buttons[1].setAttribute('aria-disabled', true);
Also button require close tag

The current way of setting aria- attributes is to reference the properties directly.
To get:
let el = document.getElementById('foobar');
console.log(el.ariaDisabled); // Should log the current value of aria-disabled.
To set:
let el = document.getElementById('foobar');
el.ariaDisabled = 'true';
console.log(el.ariaDisabled); // Should log 'true'.
Reference: Element.ariaDisabled MDN

var buttons = document.getElementsByClassName('otherButtonClass');
for(var i = 0; i < buttons.length; i++){
buttons[i].setAttribute('aria-disabled', 'true');
}

As asked there is needed one line of code:
document.querySelectorAll('.ui-dialog-buttonset .otherButtonClass').forEach(function (item) {item.setAttribute('aria-disabled', true);});