Develop Reference

How can i make a button clicked when i just click a div

<div id="mydiv"><div>
<button style="visibility:hidden; float:left"></button>
I wanna make the hidden button as is clicked when someone click the div "mydiv".

As AndrewL said, you don't need a button for this. But if you want to use a button anyways, simply assign a eventListener to your div that simulates a click on the button:
document.querySelector('#mydiv').addEventListener('click', () => {
document.querySelector('button').click();
});
Example
(I added some CSS rules and an extra function for visualization.)
document.querySelector('#mydiv').addEventListener('click', () => { // Listen for clicks on the div
document.querySelector('button').click(); // Simulate a click on the button
});
function test() { // This function gets called when clicking the button
console.log("Click!");
}
<div id="mydiv" style="height: 100px; width: 100px; background-color: red;">
<div>
<button style=" visibility:hidden; float:left; " onclick="test()"></button>
</div>
</div>

You dont need a hidden button for this. Just assign a click listener to the div itself using js like this:
const btn = document.getElementById('mydiv');
function doSomething(){
//run your script here when div is clicked
}
btn.addEventListener('click', doSomething);

You don't really need the hidden button to catch the click event. But if you really need it:
<div id="mydiv" onclick="document.getElementById('btn').click()">click on me<div>
<button id="btn" style="display:none;" ></button>

With jQuery, you can do something like this:
$('#div_id').click(function(){$('#btn_id').trigger('click');});
$('#btn_id').click(function(){//Business logic here on btn click
});

Get the button text of pushed button within an element

I have two buttons in a span
<span class="somespan">
<button type="button">left</button>
<button type="button">right</button>
</span>
I have set up an .on event to trigger when one is activated.
$('.somespan').on("mousedown tap", function() {
direction = ($(this).text());
})
This produces the result leftright as it provides the button text for all buttons. How do I only get the button text for the clicked button?

The issue is because you've attached the event to the span. For this to refer to the button elements, you need to attach the event to that element instead. Try this:
$('.somespan button').on("mousedown tap", function() {
direction = $(this).text();
console.log(direction);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="somespan">
<button type="button">left</button>
<button type="button">right</button>
</span>
Alternatively, if you have to select the span, then you can find the clicked element by using event.target instead of this. Note the e in the handler function parameters.
$('.somespan').on("mousedown tap", function(e) {
direction = $(e.target).text();
console.log(direction);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="somespan">
<button type="button">left</button>
<button type="button">right</button>
</span>

You have to attatch the listener to the buttons :)
$('button').on("mousedown tap", function() {
direction = ($(this).text());
})
or in the span
$('.somespan').on("mousedown tap","button", function() {
direction = ($(this).text());
})

Try adding
$('.somespan button').on("mousedown tap", function() {
direction = ($(this).text());
})
In your case, you are adding the mousedown event to the span instead of the button

HTML + JS How to change/unchange text onclick

I would like to write a JS that changes text on a button when clicked (to 'SHOW'), but when another button is clicked then the previously clicked button will change its text from 'SHOW' to initial text (eg 'A')
Scenario:
1. click on button A -> 'A' changes to 'SHOW'
2. click on button B -> 'B' changes to 'SHOW' but also 'SHOW'(from button A) changes back to 'A'
<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>
Above you will find example buttons i have in html file.
In JS file i have:
$("button1").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
});
previously i used class selector not id one, but still could not accomplish what i wanted. The add and remove CSS works really ok

I think this is what you are looking for:
$("button").click(function() {
var clicked_button = $(this);
$("button").each(function() {
if($(this).is(clicked_button)) {
$(this).text('SHOW');
}
else {
$(this).text($(this).attr('value'))
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" value="A">A</button>
<button id="button2" value="B">B</button>
<button id="button3" value="C">C</button>
Check working example here https://jsfiddle.net/prxd81vk/

You already have your solution, because when you add a class to the last pressed button, you can use it to change the text back:
$("button").on('click', function () {
$('.btn_click')
.text($('.btn_click').val())
.removeClass('btn_click');//this is a css class that changes bgcolor
$(this).addClass('btn_click');
$(this).text('SHOW');
});

You must use $("#button1") to properly select the button by id. This onClick is not actually associated to any of the buttons.

You need to keep track of the old text of the button and revert back to it when another button is pressed.
Example:
$("button").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$("[data-old-text]").each(function () {
$(this).text($(this).attr("data-old-text"));
$(this).removeAttr("data-old-text");
});
$(this).addClass('btn_click');
$(this).attr("data-old-text", $(this).text());
$(this).text('SHOW');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">A</button>
<button id="button2">B</button>
<button id="button3">C</button>

Use this :
Button 1 click :
$('#button1').click(function () {
$('#button1').text('Show');
});
Buttton 2 click :
$('#button2').click(function () {
$('#button2').text('show');
$('#button1').text('old value');
});

I would change targeting elements from id to class attribute.
<button class="button" value="A">A</button>
<button class="button" value="B">B</button>
<button class="button" value="C">C</button>
The script would then first clear the 'btn_click' class from any other buttons, and then apply the 'active' class to the button that was clicked.
$("button").on('click', function () {
$('.button').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');

To select element by ID you must use $("#button1").
Try like this:
$("#button1").on('click', function () {
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('SHOW');
});
And after that add whatever you want to do with other two buttons (set A,B,C).

You can try this code..
<script>
$(document).ready(function()
{
$('#button1').click(function()
{
$('.btn_click').removeClass('btn_click');//this is a css class that changes bg color
$(this).addClass('btn_click');
$(this).text('Show');
$('#button2').text('B');
});
$('#button2').click(function()
{
$('#button1').text('A');
$(this).text('Show');
});
});
</script>

How to make button show content onclick?

I'm trying to make it show the div when i click the button, what am i doing wrong?
<button type="button" onclick="myFunction()">Click Me!</button>
<div class="dglow">Glow</div>
<script>
function myFunction(){
dglow.style.display='block'
}
</script>

You use
document.getElementById("Dglow")
but your element has not an id but a class.
You have 2 ways to fix it:
1) Add an id to your element
<div id="Dglow" class="Dglow">
Glow
</div>
Example
2) Call find the element with the class
function myFunction() {
var y = document.getElementsByClassName('Dglow');
y[0].style.display = 'block';
}
Example
Hope it may helps you.

you just need to add id in your div.
function myFunction() {
document.getElementById("Dglow").style.display = 'block';
}
.Dglow
{
display:none;
}
<button type="button" onclick="myFunction()">Click Me!</button>
<div id="Dglow" class="Dglow">
Glow
</div>

You have confused class with id.
You say :
class = "Dglow"
But in javascript you did:
getElementById("Dglow")
Instead make the html equal to:
id = "Dglow"

Is it something like this you want ?
Changed class to Id and it shows and hides.
var dglow=document.getElementById("dglow");
function myFunction(){
var style=dglow.style.display;
if(style=='block')
{
dglow.style.display='none';
}
else{
dglow.style.display='block';
}
}
<button type="button" onclick="myFunction()">Click Me!</button>
<div id="dglow" style="display:none;">Glow</div>

switch value with div

I want to make a div with value like a button then input it to submit value the code look like this.
<div id="btn" name="Dragon" style="width:20px; height:20px; border:1px solid black;"></div>
<input type="submit" id="submita" value="">
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function( event ){
document.getElementById("submita").value = event.target.name;}, false);
}
</script>
the code take a value from div's name atribut then input it to submit value. if it with button element it work but div doesn't work.
how to this?

You need to use the getAttribute() DOM method as name is not a property of a div:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/JM9nH/9/
var btn = document.getElementById('btn');
btn.addEventListener('click', function (event) {
document.getElementById("submita").value = event.target.getAttribute("name");
}, false);
Note: Your example code also has an extra closing } at the end which I removed.

Use attr in jquery to get the name of div
$("#btn").click(function () {
$("#submita").val($(this).attr("name"));
});
DEMO