We Keep Coding

How to fire links with jQuery?

I want to fire a link if the div around gets clicked.
This is the general logic:
$("div").click(function() {
$("div a").click();
});
div {
background-color: yellow;
padding: 20px;
margin: 10px;
}
div:active {
background-color: blue;
}
div a {
pointer-events: none;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>London</div>
<div>Paris</div>
<div>Almaty</div>
Unfortunately, it does not work. I think I would need the different href as variable or something like that. For now, probably all links would be fired at the same time, and not only the belonging one.
How is it possible to do that?
Would be thankful for help! <3

If your code would work, you would end up clicking every link that is in side of a div. It is not going to just click the link in the div you are in. So first thing you need to do is select the link in the div you clicked.
After that, you need to trigger click on the DOM element, not the jQuery object. When you trigger it on the jQuery object, it only triggers the click event listeners you bound to it.
$("div").click(function() {
$(this).find("a").get(0).click();
});
div {
background-color: yellow;
padding: 20px;
margin: 10px;
}
div:active {
background-color: blue;
}
div a {
pointer-events: none;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>London</div>
<div>Paris</div>
<div>Almaty</div>
Or just make the anchor take up the whole div so you do not need JavaScript at all.
div {
background-color: yellow;
margin: 10px;
}
div:active {
background-color: blue;
}
div a {
padding: 20px;
display :block;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>London</div>
<div>Paris</div>
<div>Almaty</div>

You can select the <a> of the clicked div by selecting the first <a> children of the this clicked element.
$("div").click(function() {
$(this).children('a')[0].click();
});
div {
background-color: yellow;
padding: 20px;
margin: 10px;
}
div:active {
background-color: blue;
}
div a {
pointer-events: none;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>London</div>
<div>Paris</div>
<div>Almaty</div>

Add an event listener to the elements you are clicking, and in the "onclick" callback, select the a element and click it.
Array.from(document.getElementsByTagName("div")).forEach(e=>{
e.addEventListener("click",(el)=>{
el.target.querySelector("a").click()
})
})

HTML button becomes "selected" with little blue outline after it is clicked which is not needed to be

Here is what happening. I have a simple button in HTML with a simple action in JS.
Button in HTML:
<button class="btn_open_calc">Open Culculator</button>
Styles in CSS:
.btn_open_calc {
background-color: rgb(232, 209, 237);
width: 200px;
height: 40px;
border-radius: 10px;
font-size: medium;
}
Response in main.js:
var btn_Open_Calc = document.querySelector('.btn_open_calc');
btn_Open_Calc.addEventListener("click", funcOpenCalc);
function funcOpenCalc() {
Modal_Container.style.display = 'flex';
}
But when I press the button here is how it starts to look:
When I press on any other place it disappears. But I want to get rid of it at all so it won't appear.

Add outline: none; or outline: 0;(outline 0 vs none difference) to the button's css to remove the outline.
But as MDN notes,
Accessibility concerns
Assigning outline a value of 0 or none will remove the browser's
default focus style. If an element can be interacted with, it must
have a visible focus indicator. Provide obvious focus styling if the
default focus style is removed.

You can add this to your CSS to get rid of it if you really want.
button:focus {
outline: none;
}
example:
var btn_Open_Calc = document.querySelector('.btn_open_calc');
btn_Open_Calc.addEventListener("click", funcOpenCalc);
function funcOpenCalc(){
Modal_Container.style.display = 'flex';
}
.btn_open_calc{
background-color: rgb(232, 209, 237);
width: 200px; height: 40px;
border-radius: 10px;
font-size: medium;
}
button:focus {
outline: none;
}
<button class="btn_open_calc">Open Culculator</button>

How to remove this image border?

Button
This is the Image I want to add, but when I display it on the website it becomes a image with borders: Button with border (there is a background behind the button). I'm using javascript with reactjs, html and css.
Here is the code I used to display the image:
css code: code
js code: enter image description here
How do I display this image without this border? I tried putting in css file border:0; margin: 0; padding: 0; border: none; but nothing works

Try border-style: none;.
Your question isn't very concise, but it should work.. I think.. You should probably add in some more details
But really, I would never use an image in place of a button. Do this instead:
button {
height: 50px;
width: 200px;
padding: 5px 10px 5px 10px;
background-color: white;
font-size: 30px;
border: 2px solid black;
border-radius: 40px;
}
<button onclick="">Contato</button>

Change button styling after clicked

I'm wanting a button to change it's appearance AFTER it's been clicked on and have it stay that way. I've tried css using "button:focus" and it'll work, but as soon as another button or anything else is clicked any previously selected button will rever back to it's original styling.
I have default styling set and hover styling set but can't get the visited/clicked-on styling to stay. I don't want it to go back till the page is reloaded. Is this something you can't do with css and have to implement with JS?
This is going to be a bit lengthy, but here is what I have so far:
Html:
<div style="text-align:center;">
<button id=p1Button><span>Player One, please select me! </span></button>
<button id=p2Button><span>Player Two, please select me! </span></button>
</div>
CSS:
button{
width: 16em;
color: white;
background: #0392CF;
font-weight: 800;
font-size: 1.5em;
background-attachment: fixed;
border-radius: .25em;
cursor: pointer;
border: none;
margin: .5;
height: 2.2;
transition-duration: 1.5s;
transition-timing-function: linear;
}
button:hover {
color: white;
background: #F37736;
border-radius: 2em;
width: 13em;
}
button:hover span {
display: none;
}
button:hover:before {
content:"Clicky Clicky!";
letter-spacing: .25em;
}
button:focus {
color: white;
background: #F37736;
border-radius: 2em;
width: 13em;
}
button:focus span {
display: none;
}
button:focus:before {
content:"Clicked!";
letter-spacing: .25em;
}

You need to understand focus is a stage. Whenever the element loses focus it will change back to old style. And what you want to achieve is triggered by a 'click' event. Using JS is the best way to handle it.
document.getElementById('p1Button').addEventListener('click', onClick);
document.getElementById('p2Button').addEventListener('click', onClick);
function onClick(){
this.className += ' YourClassHere';
}
Also I recommand you using jQuery which should be more convenient.

The best way to do this seems to be by using JavaScript. And easier way will be to use jQuery.
In a js file, put the following code to do it with jQuery
$("#p1Button").click(function(){
$(this).addClass("yourClassName");
});
If you don't want to use jQuery, then use the code as follows and in HTML, give a reference to that function like <button onclick="clickedOnButton(this)" id=p1Button><span>Player One, please select me! </span></button>
function clickedOnButton(this)
{
this.className+='yourClassName';
}
Add a class in the css file too
.yourClassName
{
/* Style to use when clicked on button. */
}

Remove shadow from a button when its active

I have a button with javascript attached. When you click the button a hidden box will appear, when you click another one, the first box gets replaced with the second and so on. When my button is active, when the box is visible, it gets a shadow around. And i don´t want that! I tried to use the following css codes:
.nav > button{
width: auto;
font-family: 'OpenSansBold';
color: #000;
padding: 3px;
border: none;
margin-right: 10px;
margin-top: 5px;
font-size: 15px;
text-align: left;
background-color: #fff;
}
button:hover{
cursor: pointer;
border: none;
color: #7b1a2c;
}
button:visited{
font-family: 'OpenSansBold';
box-shadow: none;
}
button:active{
box-shadow: none;
}
But with no luck. Is there another CSS code for buttons when its active?
I have no clue about javascript, just copy pasted this thing. Maybe this is something that can be fixed in the js code? Just in case, I can show you guys:
$('div.box').slice(1).addClass('hidden');
$('.nav').children('button').on('click', function(){
// console.log('klikk');
$(this).data('content');
$('.box').not('hidden').addClass('hidden');
$( $(this).data('content')).removeClass('hidden');
});

Maybe you talk about outline property or :focus pseudo-class?
Try this one:
button:active, button:focus {
box-shadow: none;
outline: 0;
}

To give you a working example, play around with the following snippet, I think this behaves like you would want it to.
To completely remove the shadow, just remove the second JS rule.
// :active rules
$('button').on('mousedown', function () {
$(this).css('box-shadow', 'none');
});
// :visited rules
$('button').on('mouseup', function () {
$(this).css('box-shadow', '10px 10px 5px #888888');
});
button {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<body>
<button>test</button>
</body>