Develop Reference

classList.toggle does not behave how it should be

Started a project to build a website, so far was going good until this problem.
The problem: " I'm tried to make a dropdown menu to show options for a post(delete and edit). I made the dropdown menu and it works perfectly on my laptop(Mac-book pro, testing on google chrome), my partner on this project works on a windows desktop computer. I sent him the files for him to test, and it does not work, it does not toggle the "active" on the drop down element, we tried on his computer, chrome, fire-fox, even on his cellphone (safari and chrome) and it does not work. The click works, we tested it."
I will let you know what we did for knowing what was wrong if we could find out a solution.
Tests:
Click works, we made an alert when it was clicked so we know that it entered to the function we made
We did the console.log of the element after the toggle function. In this case something "weird" happened, the output was the element with the "active" on the class but the element in the dev-tool does not change.
We made it with vanilla JS, I could have used jQuery, normally I like to test things with JavaScript for then doing the jump to jQuery, but as this problem came no time for it.
Other questions you might have, is that there are going to be multiple posts, so this is the way I found to solve my problem to know in which post does the user click to make the correct dropdown.
If someone can help me to solve this I would appreciate, normally I tried to find the solutions by myself but in this case was not possible, I think it goes out of my hands and my knowledge and I find it odd that works on one computer only.
Thank you!.
I will show you the part of the code in case is needed.
HTML:
<div onclick="settings(event)"class="settings" id="1508795">
<i class="fas fa-cog"></i>
</div>
<div class="settingsdropdown" id="post1508795">
<ul>
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
JS:
function settings(e){
var postid=e.currentTarget.getAttribute('id');
var settingslist = document.getElementById('post' + postid);
settingslist.classList.toggle("active");
}
```

I would change the html from:
<div onclick="settings(event)"class="settings" id="1508795">
to (note the this):
<div onclick="settings(this)"class="settings" id="1508795">
Then adjust the function to be:
function settings(e){
var settingslist = document.getElementById('post' + e.id);
settingslist.classList.toggle("active");
}

JQM 1.4.5 : disabling button breaks page rendering

Going through a steep learning curve, i am currently experimenting various UX 'toys' that i will require to implement an app. One of these is to disable a button and enable it on the fly. Following the instructions of the good book , I wrote a little snippet of code to test it out. Clicking on "Soap" runs a series of chained promises, and toggles the "Soap1" button disabled prop.
My HTML/JS
<div data-role="content">
<a href="#" id="btn_soap1" class="ui-input-btn ui-btn ui-mini ui-btn-inline ui-icon-back "
onclick="getInitialNotifications();">Soap1</a>
<button id="btn_soap" class="ui-btn ui-btn-inline ui-mini ui-icon-bullets "
onclick="getInitialNotifications();">
Soap
</button>
<script>
$("#btn_soap1").button({ // required initialization
disabled:false
});
$("#btn_soap").on("click", function () {
// bubbled from the onClick thingie in the markup
var isDis = $("#btn_soap1").button("option","disabled");
$("#btn_soap1").button("option","disabled",!isDis);
// var but = $("#btn_soap1");
// var className = "ui-state-disabled";
// if(but.hasClass(className)) {
// but.removeClass(className);
// } else {
// but.addClass(className);
// }
});
</script>
</div>
Intended rendering
Broken rendering (all browsers and device sims and devices)
Question : can you see any noob error in the JS that would cause this side-effect. I added (in comments) my work-around, which works as specified, but is seems counter-intuitive.
EDIT: (from Mr. Duc Nguyen's answer). What breaks the rendering is adding the initialization. If it is not there, i get an exception whining that i am calling a function prior to initialization when changing the disabled state.
EDIT AGAIN : discovered JSfiddle, ... a fiddle that reproduces this

Edited: new answer basing on jsFiddle
You have gotten yourself in a very interesting situation, some points below:
jQM has an auto-initaliasation merchanism, if you want to leverage that, you have to follow the rules, or totally disable it and do the initialisation yourself. jQM global config
You have 2 "buttons", but they are actually 1 <a> and 1 <button>, disabling the <a> was never an easy one, have a look here disabling html link
jQM might confuse you that the <a> tag is a button widget, but it is not! It just has the same styling as a button, not a button widget. Button widget is only applying to <button> and appropriate <input> type (it was clearly mentioned in the documents back in 1.2.0's days, I couldn't find it in the 1.4.5 docs)
So, here is how I would do to leverage the jQM auto-initialisation:
Soap1
<button id="btn_soap" data-inline="true">Soap</button>
Notice on the <a>:
The attribute data-role="button" was to tell jQM to mark it up as a button
This classclass="ui-disabled" was to disable it initially.
And how to disable the link <a> on-the-fly. Notice that by just adding a class, it won't work on some specific infamous browsers, referring to the above stackoverflow answer for more information.
var isDis = $("#btn_soap1").hasClass("ui-disabled");
if (!isDis) {
$("#btn_soap1").addClass("ui-disabled");
} else {
$("#btn_soap1").removeClass("ui-disabled");
}
Again, you can only call .button([method]) on a real button!
Have a look on this updated jsFiddle, I have cleaned things up a bit.

How do I simulate a click on a div with javascript

I am looking for a way to be able to rig a shortcut to a youtube controll button. I want to be able to click on the left and right arrow to activate "Previous video" and "Next video" on a playlist. I used to be easily able to do it myself, but they made some changes and since those I can't quite replicate what i used to have working.
I use the Google Chrome Shortkey Plug-in to manage my short cut keys. I make the right key execute a javascript code only on "https://www.youtube.com*"
The problem reside in the script to execute. I used to simply do a document.getElementById but now they use class instead of id and I cant get it to work. Their buttons are divs and they go like this:
<div class="ytp-button ytp-button-prev" role="button" aria-label="Previous" tabindex="6050" style="display: inline-block;">
</div>
<div class="ytp-button ytp-button-next" role="button" aria-label="Next" tabindex="6051" style="display: inline-block;">
My code actualy comes from another Stackoverflow Question
Still, if I put all of that together to make the folowing code it doesn't work.
simulate(document.getElementsByClassName("ytp-button ytp-button-prev"), "click");

getElementsByClassName returns an array, since you can have multiple elements with the same class name. You can pick them by document.getElementsByClassName("ytp-button ytp-button-prev")[index]

jQuery is not the best solution for all our projects, but for simulate events it's not bad option
(function($){
$('.element').click();
// same for others ex: $('.element').keyup();
})(jQuery);
example: http://jsfiddle.net/h0po3q3w/

If you are using jQuery, you can target the element then trigger a click event like this:
$( ".ytp-button-prev" ).trigger( "click" );

Jason has your answer, but an alternative is to use document.querySelector. If there is only one button with those classes, or you want the first one, then:
var button = document.querySelector('.ytp-button.ytp-button-prev');

Click event not working on a div appended dynamically in IE

I am using jquery geocomplete plugin to show address suggestion when user type any address. It appends one div dynamically having class "pac-container". It looks like this :
<div class="pac-container">
<div class="pac-item"><b>SDG</b>, Vaishali, Bihar, India</div>
<div class="pac-item"><b>SDG</b>M, Kuber Nagar, Ahmedabad, Gujarat, India</div>
<div class="pac-item"><b>sdg</b>sdf, Isselburg, Germany</div>
<div class="pac-item">Lorong <b>Sdg</b> Kasim B Hamid Malacca Melaka Malaysia</div>
</div>
Now my problem is when I click on any of the pac-item I have to stop event bubbling. How can I attach the event handler on dynamically added pac-item for IE.
JS Fiddle : http://jsfiddle.net/EcPdP/2/
It is working fine for all browser except IE. In IE, clicking on pac-item is propagating that click event to body. Please help me to solve this.

try this:
$("#input-geo").geocomplete().bind("click",function(e){
e.stopPropagation();
e.preventDefault();
});
Which version of IE are you checking in?

I had similar problem for IE and later on narrowed down to IE10 only.
To solve try adding
background-image:url(/none)
to the div elements that are not displaying. For some reason it works even if a non-existing image is inserted, so I used that.
It turns out that due to the fact that the dynamically created div was made transparent using progid:DXImageTransform, IE didn't capture events for said div.
I don't remember where I got this solution from. If I fond original link, I'll update the answer.

Click a button made from div with JavaScript?

In Google+, the button that is used to post a comment is made from a div:
<div role="button" id=":1vq.post" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>
I think I can click it with:
document.getElementById(":1vq.post").click();
But it says that the element have no attribute click, and I found that onclick is null. So how could I click the button with JavaScript?

EDIT: After a chat with wong2 who started this question and a lot of failed guesses for what this question is really about (the question is quite poorly written), what they are trying to do is to write a Greasemonkey userscript to make the enter key press the Post Comment button in Google+ streams. Since I don't have an invite into Google+ yet, I can't even see the relevant code so not much I can do. This question is not about putting anything related to Google+ in your own site - it's about trying to use Greasemonkey to modify the behavior of Google's site in your own browser.
Earlier attempts to help:
id=":1vq.post" is not a legal CSS id name. You can't use the ":" character in a selector name. This causes multiple issues because not only is it not a legal character, but it's also a meaningful character in the CSS selector syntax. So, I see that you have two issues.
First, your selector logic is not working. Second, as others have said, you can't just assign to click in this way with plain javascript (e.g. no framework).
If you change your selector logic to work correctly, you can get it to work properly (using jQuery) like this:
<div role="button" id="aPost" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>
$("#aPost").click(function() {
alert("I was clicked.");
});
And, you can see it in action in this jsFiddle: http://jsfiddle.net/jfriend00/Yfnc7/. Click Run and then click on the Post Comment.

click() applies only to elements like input and button.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361
onclick would appear in 1990 and not at Google. They should be using addEventListener.
Try to set a breakpoint and see what function is called on click. Then call the function directly.
To trigger a click event handler one can use createEvent plus dispatchEvent.
See example: http://jsfiddle.net/DzVg9/
Note, that Google Plus may actually be using mousedown or mouseup events.

Are you sure you are acurately selecting the button with $(":1vq.post")? Perhaps you need to change it to $("#:1vq.post") or something like that (I'm not sure how JQuery handles the : and . characters).