Develop Reference

How do I ensure that every one of my icons are clickable? [duplicate]

I have a page with duplicate ID's for a form element. The catch is I the elements show up separately based on a toggle. So both ID's never show up simultaneously.
However when I do form validation on that element, it always selects the element displayed last in the code (even if its hidden).
Is there a selector to select the visible duplicate ID?
I've tried the following but to no avail:
$('#my_element:visible').val();

As the myriad of other questions about this premise will tell you, you cannot use the ID selector # in this case; you have to use something like $('div[id=foo]') to find it.

Duplicate IDs are invalid HTML and will nearly always cause issues with scripting. Avoid if at all possible.

The reason this is occurring is because of Duplicate IDs. IDs must be unique for the HTML to be considered valid. Whenever you aren't working against valid HTML, your results are often erratic.
In this case, even though you are only showing one of the forms at a time, they're both still present in the mark up which is why the last one in the code is always the one that's getting run.
Since you're using jQuery, I'd highly recommend using classes for this instead.

Avoid duplicates ids on the page. It is not a valid HTML.

as Rwwl said, duplicate IDs are invalid. Assign classes instead of ids to them.
Then you can do
alert($('.my_element:visible').val());

try :hidden
$("#my_element").find(":hidden").val();
Elements can be considered hidden for several reasons:
They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.
NOTE: Elements with visibility: hidden or opacity: 0 are considered to be visible,

Do not use same id for multiple elements, classes are better!

You can not specify using the # id selector only, you need to be more specific. One way is choose the type of element first then id:
For an input element:
$('input#my_element:visible').val();
or for a div element:
$('div#my_element:visible').val();

An alternative solution to select the element with jQuery and then get value from from the element directly:
$('#my_element:visible')[0].value

Combe Multiple JS Selectors with jQuery Selector

I am selecting a group of table rows by using the following line of JS:
document.getElementById('tab1_content').contentDocument.documentElement.getElementsByClassName("data1_smaller")
These represent entries in a table of contents. I want to return only those above which also contain the word 'CHAPTER', so I was attempting to use the jQuery :contains() selector to accomplish this and attempted to convert the entire thing into a single jQuery selector; so, to begin with, I tried converting the following invalid line:
document.getElementById('tab1_content').contentDocument.documentElement.getElementsByClassName("data1_smaller").$(":contains('CHAPTER')")
to this:
$("#tab1_content > contentDocument > documentElement > .data1_smaller:contains('CHAPTER')")
The selector above doesn't give an error but it fails to find anything. Does anybody know the correct way to do this?

You can achieve what you want with pure vanilla js just like you tried in the beginning. You just need to do some small adjustments to your code. You can use querySelectorAll() to query all elements matching a selector inside your ID. Something like this should work just by looking at your example, but might need some small adjustments.
[...document.getElementById('tab1_content').querySelectorAll(".data1_smaller")].filter((node) => node.textContent.includes('CHAPTER'))
// Edit, saw in the comments that you're accessing content in an iframe
[...document.getElementById('tab1_content').contentWindow.document.querySelectorAll(".data1_smaller")].filter((node) => node.textContent.includes('CHAPTER'))

I found this solution based on Anurag Srivastava's comments:
$("#tab1_content").contents().find(".data1_smaller:contains('CHAPTER')")
The issue was that I was trying to select things that are inside of an iframe and the the .contentDocument.documentElement that I used to access the iframe in JS has to be changed to .contents() in jQuery in order for it to work.

Neither contentDocument or documentElement are valid HTML tags. Try to select by id or class name.

Changing value of span (Javascript) with Tampermonkey

I have a question regarding the modification of a value inside a class. I would like to change the value with Tampermonkey extension however I cant get it to work.
The initial code looks like this:
<div class="bzeTileValue bzeTileValueNegative">
<span class="bzeTileUnit">YYY</span>
<span>XXXX</span></div>
I would like to change the value of XXXX. Preferably before the site loads.
I tried already the document.getElementbyId("xxxxx").innerHTML=....; But couldn't get it to work unfortunately. Any help would be hugely appreciated.
Thanks a lot friends

The span containing XXXX is inside a div which has classes on it but no ID. This means that getElementById won't work. You can use Document.querySelector to get the div and then access the child nodes of that div. The span you are trying to access doesn't have any classes on it, but you can target it as the second child inside the div. Then you can change the value using innerHTML or innerText.
Altogether it looks like this:
document.querySelector('.bzeTileValue').children[1].innerHTML = 'New Value';

Difference of using element selector for hide and click functions

I am unable to understand why $('#mdiv input')[1].hide(); does not work and at same time why $('#mdiv input')[1].click(); works fine?
Firstly I want to know why? Secondly how to make it working without having the id of the element?
Here is JSFiddle Link to see what i am trying and what I need

That's because you are converting the jQuery object to DOM element object which has no hide method, your second code works as DOM element object has click method like jQuery object. You can use eq method instead which returns a jQuery object.
$('#mdiv input').eq(1).hide();

If you not want to select tags by id, you can use
$('input[name="firstname"]')...
// or
$('input[type="text"][name="firstname"]')...

Replace part of innerHTML without reloading embedded videos

I have a div with id #test that contains lots of html, including some youtube-embeds etc.
Somewhere in this div there is this text: "[test]"
I need to replace that text with "(works!)".
The normal way of doing this would of course be:
document.getElementById("test").innerHTML = document.getElementById("test").replace("[test]","(works!)");
But the problem is that if i do that the youtube-embeds will reload, which is not acceptable.
Is there a way to do this?

You will have to target the specific elements rather than the parent block. Since the DOM is changing the videos are repainted to the DOM.

Maybe TextNode (textContent) will help you, MSDN documentation IE9, other browsers also should support it

Change your page so that
[test]
becomes
<span id="replace-me">[test]</span>
now use the following js to find and change it
document.getElementById('replace-me').text = '(works!)';
If you need to change more than one place, then use a class instead of an id and use document.getElementsByClassName and iterate over the returned elements and change them one by one.
Alternatively, you can use jQuery and do it even simpler like this:
$('#replace-me').text('(works!)');
Now for this single replacement using jQuery is probably overkill, but if you need to change multiple places (by class name), jQuery would definitely come in handy :)