I'm trying to select and edit all three individual &lt;span&gt; elements found in a &lt;div&gt; with an id of #calendarWidget. I've been able to select two of the three using querySelector and innerHTML.  Here's my code:  window.onload = function() {   document.querySelector('#calendarWidget &gt; div &gt; table &gt; tbody &gt; tr &gt; td &gt; span').innerHTML="&lt;span style='color:white; background:#3A87AD; padding: 0 5px; border-radius:2px'&gt;Available Sessions&lt;/span&gt;";   document.querySelector('#calendarWidget &gt; div &gt; table &gt; tbody &gt; tr &gt; td &gt; span:nth-child(2)').innerHTML="&lt;span style='color:white; background:#A5CF48; padding: 0 5px; border-radius:2px'&gt;Registered Sessions&lt;/span&gt;";   document.querySelector('#calendarWidget &gt; div &gt; table &gt; tbody &gt; tr &gt; td &gt; span:last-child').innerHTML="&lt;span style='color:white; background:#8a8a8a; padding: 0 5px; border-radius:2px'&gt;Past Sessions&lt;/span&gt;"; };  This code selects and edits the first and last &lt;span&gt; elements, but not the middle element.   I've tried adding :nth-child(2) to the second &lt;span&gt; element, but that isn't working.  Is it possible to make this work, and if so, how do I go about doing it?
17417
Is there a simple way to convert a string to Title Case? E.g. john smith becomes John Smith. I'm not looking for something complicated like , just (hopefully) some kind of one- or two-liner.
80302
&lt;div id="myDiv"&gt;      &lt;a&gt;...&lt;/a&gt;      &lt;a&gt;...&lt;/a&gt;      &lt;a&gt;...&lt;/a&gt;      &lt;a&gt;...&lt;/a&gt;      &lt;a&gt;...&lt;/a&gt;      &lt;a&gt;...&lt;/a&gt; &lt;/div&gt;   If you wanted to select the 2nd, 3rd and 4th a tags in the above example, how would you do that? The only thing I can think of is:  $("#myDiv a:eq(1), #myDiv a:eq(2), #myDiv a:eq(3)")   But that doesn't look to be very efficient or pretty. I guess you could also select ALL the as and then do run .each over them, but that could get very inefficient if there were a lot more as.
8990
I would like to ask for some simple examples showing the uses of &lt;div&gt; and &lt;span&gt;.   I've seen them both used to mark a section of a page with an id or class, but I'm interested in knowing if there are times when one is preferred over the other.
17427
I'm porting a module that currently works with Blocks/BlockForms to Paragraphs/NodeForms. I'm inserting an embedded form inside a Paragraph inside a Node Edit page using a hook_field_widget_entity_reference_paragraphs_form_alter. The general structure where the form gets inserted is: $form['field']['widget'][0]['settings'][form here]  After this the form displays as expected on the node edit page. The inserted form goes through a number of #process steps. The element in question is a select form that when the button underneath it is pressed, is supposed to retrieve some data via a custom submit handler and place it on the page with ajax:  The array for this element looks like this:  You can see the custom submit handler that is supposed to fire when 'Select Segment Set' is pressed After debugging, I've found that the entire NodeForm appears to be submitted to the backend, and the only handler that is found is from some other field that uses ajax. In short 'updateSegmentSet' is never discovered as a submit handler. When I debug the original module based on block/blockforms, I do see the correct submit handler being discovered. Now in the latter case, of course a blockForm is submitted to the back end with the correct plugin. Given that this is basically a form within a form within a form, is there something special I have to do to get the custom submit handler to run? I've read a few things online e.g. the 'settings' key and '#tree' = true. EDIT The Ajax property looks like this:       '#ajax' =&gt; [         'callback' =&gt; [$this, 'updateSegmentSetAjax'],         'wrapper' =&gt; $wrapper_id,       ],    public function updateSegmentSetAjax(array &amp;$form, FormStateInterface $form_state) {     $button = $form_state-&gt;getTriggeringElement();     // Go one level up in the form, to the widgets container.     return NestedArray::getValue($form, array_slice($button['#array_parents'], 0, -2));   }  As best I can tell, this is never called either.
11521
Can someone show me how to get the top &amp; left position of a div or span element when one is not specified? ie: &lt;span id='11a' style='top:55px;' onmouseover=&quot;GetPos(this);&quot;&gt;stuff&lt;/span&gt; &lt;span id='12a' onmouseover=&quot;GetPos(this);&quot;&gt;stuff&lt;/span&gt;  In the above, if I do: document.getElementById('11a').style.top  The value of 55px is returned. However, if I try that for span '12a', then nothing gets returned. I have a bunch of div/spans on a page that I cannot specify the top/left properties for, but I need to display a div directly under that element.
26713
How do I get the next element in HTML using JavaScript?  Suppose I have three &lt;div&gt;s and I get a reference to one in JavaScript code, I want to get which is the next &lt;div&gt; and which is the previous.
22840
I'm building an HTML UI with some text elements, such as tab names, which look bad when selected. Unfortunately, it's very easy for a user to double-click a tab name, which selects it by default in many browsers.  I might be able to solve this with a JavaScript trick (I'd like to see those answers, too) -- but I'm really hoping there's something in CSS/HTML directly that works across all browsers.
62871
If my html looked like this:  &lt;td class="controlCell"&gt;     &lt;input class="inputText" id="SearchBag.CompanyName" name="SearchBag.CompanyName" type="text" value="" /&gt; &lt;/td&gt;   How could I select #SearchBag.CompanyName with JQuery? I can't get it to work and I fear it's the dot that's breaking it all. The annoying thing is that renaming all my id's would be a lot of work, not to mention the loss in readability.  Note: Please let's not start talking about how tables are not made for lay-outing. I'm very aware of the  and try hard to use it as much as possible.
74715
I have several input and option elements on my page, each (well almost) have an event attached to update some text on the page once they change. I use jQuery which is really really cool :)   I also use Microsofts  framework, utilizing the UpdatePanel. The reason why I do that is that certain elements are created on the page based on some server-side logic. I don't really want to explain why I use the UpdatePanel - even if it could (it can with quite some effort) be rewritten to use only  I still want that UpdatePanel.  You probably guessed it - once I have a postback on the UpdatePanel the jQuery events stops working. I actually was expecting this, since the "postback" is not really a new postback so my code in document.ready that binds the events won't be fired again. I also confirmed my suspicion by reading up on it in the jQuery help libraries.  Anyway I'm left with the problem of rebinding my controls after the UpdatePanel is done updating the . I preferably need a solution that does not require adding more .js files (jQuery plug-ins) to the page but something as simple as being able to catch the UpdatePanel's 'afterupdating' where I can just call my method to rebind all the form elements.
100723
I am building an application where I want to be able to click a rectangle represented by a DIV, and then use the keyboard to move that DIV by listing for keyboard events.  Rather than using an event listener for those keyboard events at the document level, can I listen for keyboard events at the DIV level, perhaps by giving it keyboard focus?  Here's a simplified sample to illustrate the problem:  &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt;  &lt;div id="outer" style="background-color:#eeeeee;padding:10px"&gt; outer     &lt;div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;"&gt;    want to be able to focus this element and pick up keypresses    &lt;/div&gt; &lt;/div&gt;  &lt;script language="Javascript"&gt;  function onClick() {     document.getElementById('inner').innerHTML="clicked";     document.getElementById('inner').focus();  }  //this handler is never called function onKeypressDiv() {     document.getElementById('inner').innerHTML="keypress on div"; }  function onKeypressDoc() {     document.getElementById('inner').innerHTML="keypress on doc"; }  //install event handlers document.getElementById('inner').addEventListener("click", onClick, false); document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false); document.addEventListener("keypress", onKeypressDoc, false);  &lt;/script&gt;  &lt;/body&gt; &lt;/html&gt;   On clicking the inner DIV I try to give it focus, but subsequent keyboard events are always picked up at the document level, not my DIV level event listener.  Do I simply need to implement an application-specific notion of keyboard focus?  I should add I only need this to work in Firefox.
50911
I'm trying to use  in some components but I only got basic html component in my page.  For example I add this button :  &lt;lightning:button variant="brand" label="Précédent" onclick="{!c.previousPage}"/&gt;   It is the only lightning base element in my component, maybe I have to insert it into a special element, like a container ?   My Salesforce org is in spring 17.  Here is the kind of button I got :  instead of button with slds design.  Edit : I try differents browsers but I always get the same result.
71720
Stack Overflow provides good tools in the question editor, like "Links" and "Styling".  Another thing that for me would be nice is a color selector. Although an HTML editor is available, a direct click on tool would be good, and users can select different colors, as for marking errors in their program with red, and more important data with blue.
92276
I have a form that is dynamically generated, and has dynamically generated id's (and potentially classes). The forms are the same but they have the related id tacked on to the end.  How can I select each set of inputs and apply code to each one?  I was experimenting with $('input[id^=@id_airline_for_]') but could not get it to fly. I suspect I am missing some fundamental jQuery knowledge that is holding me back since I am sure this is a common problem with dynamic forms.   &lt;form method='POST'&gt;     &lt;label for="id_airline_for_8"&gt;Airline&lt;/label&gt;:     &lt;input id="id_airline_for_8" class="arrival_transfer_toggle_8" type="text" maxlength="30" name="airline_for_8"/&gt;     &lt;label for="id_flight_number_for_8"&gt;Flight Number&lt;/label&gt;:     &lt;input id="id_flight_number_for_8" class="arrival_transfer_toggle_8" type="text" maxlength="30" name="flight_number_for_8"/&gt;      &lt;label for="id_airline_for_17"&gt;Airline&lt;/label&gt;:     &lt;input id="id_airline_for_17" class="arrival_transfer_toggle_17" type="text" maxlength="30" name="airline_for_17"/&gt;     &lt;label for="id_flight_number_for_17"&gt;Flight Number&lt;/label&gt;:     &lt;input id="id_flight_number_for_17" class="arrival_transfer_toggle_17" type="text" maxlength="30" name="flight_number_for_17"/&gt;      -- snip --  &lt;/form&gt;   EDIT: I should update that i want to be able to perform some action when the input is clicked but only for classes with a matching id at the end.  To make it easy, lets say I want all inputs with a matching id at the end of the #id to disappear when one is clicked (just for arguments sake).
8344
I'm working with a bit of html and Javascript code that I've taken over from someone else. The page reloads a table of data (via an asynchronous request) every ten seconds, and then re-builds the table using some DOM code. The code in question looks something like this:  var blah = xmlres.getElementsByTagName('blah'); for(var i = 0; i &lt; blah.length; i++) {     var td = document.createElement('td');     var select = document.createElement('select');     select.setAttribute("...", "...");     select.onchange = function() {         onStatusChanged(select, callid, anotherid);     };     td.appendChild(select); }   When the onchange event is fired for a &lt;select&gt; element however, it seems like the same values are being passed to the onStatusChanged() method for every &lt;select&gt; in the table (I've verified that in each iteration of the loop, callid and anotherid are being given new, distinct values).   I suspect this is occuring because of the nature of how I am setting the event handler, with the select.onchange = function() syntax. If I understand how this is working correctly, this syntax sets a closure for the onchange event to be a function which refers to these two references, which end up having a final value of whatever they are set to on the last iteration of the loop. When the event fires, the value referenced by callid and anotherid is the value set in the last iteration, not the value set at the individual iteration.  Is there a way that I can copy the value of the parameters I am passing to onStatusChanged()?  I've changed the title to better reflect the question and the accepted answer.
16404
I have the following HTML &lt;select&gt; element:  &lt;select id="leaveCode" name="leaveCode"&gt;   &lt;option value="10"&gt;Annual Leave&lt;/option&gt;   &lt;option value="11"&gt;Medical Leave&lt;/option&gt;   &lt;option value="14"&gt;Long Service&lt;/option&gt;   &lt;option value="17"&gt;Leave Without Pay&lt;/option&gt; &lt;/select&gt;   Using a JavaScript function with the leaveCode number as a parameter, how do I select the appropriate option in the list?
116321
&lt;template&gt;            &lt;lightning-card&gt;                     &lt;lightning-input type=&quot;text&quot; label=&quot;field1&quot; name=&quot;field1&quot; onchange={handleChange}&gt;&lt;/lightning-input&gt;                     &lt;lightning-input type=&quot;text&quot; label=&quot;field2&quot; name=&quot;field2&quot; onchange={handleChange}&gt;&lt;/lightning-input&gt;                     &lt;lightning-input type=&quot;text&quot; label=&quot;field3&quot; name=&quot;field3&quot; onchange={handleChange}&gt;&lt;/lightning-input&gt;                     &lt;div if:true={errorMsg} style=&quot;margin-left: 0%;&quot;&gt;                         &lt;p style=&quot;color: red;&quot;&gt;{errorMsg}&lt;/p&gt;                     &lt;/div&gt;                 &lt;/lightning-card&gt;         &lt;div style=&quot;float: right&quot; class=&quot;slds-p-bottom--large&quot;&gt;         &lt;lightning-button class=&quot;slds-m-left_x-small&quot; label=&quot;Previous&quot; onclick={handlePrevious}&gt;         &lt;/lightning-button&gt;         &lt;lightning-button class=&quot;slds-m-left_x-small&quot; label=&quot;Next&quot; variant=&quot;brand&quot; onclick={handleNext}&gt;         &lt;/lightning-button&gt;     &lt;/div&gt; &lt;/template&gt;  We have above lwc component, which is embedded in screenflow. and the screen flow previous,next buttons are overrided by using Flow Navigation Events. So when we clicked on Previous button, we are facing  class java.lang.String cannot be cast to class java.lang.Boolean (java.lang.String and java.lang.Boolean are in module java.base of loader 'bootstrap')
38027
I need a way to determine the type of an HTML element in JavaScript. It has the ID, but the element itself could be a &lt;div&gt;, a &lt;form&gt; field, a &lt;fieldset&gt;, etc. How can I achieve this?