Get High-Order Block'S Id on Click

display block with event target id

~~It's bad bad to use the same id in one HTML document. Never do this. Nobody likes that, jQuery doesn't like that. I don't like it.~~ Try using a class or a data property.

But.. scratch that.. you are not really trying to do that. But still.. it's better to use a data property :)

Anyways, to accomplish this with a data property, you can do something like this:

html

<div id="gallery-container">
  <li data-id="1723">
    <p>
      123
    </p>
  </li>
  <li data-id="1725">
    <p>
      456
    </p>
  </li>
</div>
<ul id="gallery-list">
  <li data-id="1723">
    <strong>qwertyuiop</strong>
  </li>
  <li data-id="1725">
    <strong>asdfghjkl</strong>
  </li>
</ul>

$("#gallery-list li").click(function() {
  var id = $(this).data('id');
  $("#gallery-container").find('li').each(function() {
     $(this).find('p').toggle($(this).data('id') === id);
  });
});

jsfiddle

Hide and show divs with click events

Extract your logic into a separate function, then use the e.target to extract the specific id of the list item, then convert it to the id of the div you want to show.

This way you can easily handle 10, 100 or even 1000+ li/div pairs to hide and show.

var showHide = document.querySelector("ul");var divElements = document.querySelectorAll("div");
function showHideElement(element) {  var itemId = element.id || "";  var divId = itemId.replace("list", "div");    divElements.forEach(function (element) { element.style.display = "none"; });  document.getElementById(divId).style.display = "block";}
showHide.addEventListener("click", function(e) {  showHideElement(e.target);});

div {  display: none;}

<ul>  <li id="list1">list 1</li>  <li id="list2">list 2</li>  <li id="list3">list 3</li></ul>
<div id="div1">  <p>Text 1 goes there...</p></div>
<div id="div2">  <p>Text 2 goes there...</p></div>
<div id="div3">  <p>Text 3 goes there...</p></div>

svelte-sapper each block list item selection for deletion - get the id

You can tell the delete function which id was clicked by simply passing it in as an argument to the function:

function handleDelete(id) {
  // Delete logic here
}

<button on:click="{() => handleDelete(id)}">Delete</button>

!! Note that you should not call handleDelete directly in your markup as this will execute the function immediately upon rendering (and thus effectively delete your entry as soon as it appears on screen)

Initially I want ON button to be display block and off to display none, if I click ON button, OFF appears & On disappears, and vice versa

The issue with your logic is that you need to switch the display state of both elements within the function you call:

var on = document.getElementById("on");
var off = document.getElementById("off");
  
function myFunction() {  
  if (on.style.display === "none") {  
    off.style.display = "none";
    on.style.display = "block";
  } else {
    off.style.display = "block";
    on.style.display = "none";
  }
}

<button onclick="myFunction()" id="on">ON</button>
<button onclick="myFunction()" id="off" style="display: none;">OFF</button>

toggle show/hide div with button?

Look at jQuery Toggle

HTML:

<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>

jQuery:

jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {        
         jQuery('#content').toggle('show');
    });
});

For versions of jQuery 1.7 and newer use

jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
        jQuery('#content').toggle('show');
    });
});

For reference, kindly check this demo

How to order Keyed each blocks in Svelte

This was a bug in version 3.38. Version 3.39 was just released which fixes this issue.

Wrong target when pressing html button with html tags in it

Use currentTarget instead. From MDN:

It always refers to the element the event handler has been attached to
as opposed to event.target which identifies the element on which the
event occurred

function clickHandler(me){
    console.log(me.currentTarget);
}

Here is a fiddle to demonstrate the above.