The Onclick Is Not Working on First Click

The onclick is not working on first click

It does not work because this if (fahrenheit.style.display === 'none') will return NULL as there is no inline style on the element. this method won't "look" at CSS, it only works for inline styles. You could try this:

var element = document.getElementById('toggleFahrenheit'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

to check the CSS properties in pure JS or you could use JQuery which would solve it in one line of code.

Onclick event is not working on first click

I suppose that menuBarSlide is the id of a div, if so this should work for you.

I've added some styling to highlight the div, and a console.log() to be sure that the code executes.

Edit: Maybe the problem is that you expect the element to have a value in the right property but it is different, so logging the style can be helpful.

Edit 2: The problem is in the initial value (that is why your first click is not working, so with this variation menu.style.right = menu.style.right || "-100px"; that problem is solved. That line of code assigns -100px if the value comes null. Additionally, the program logs the value before and after the conditional assignment.

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
    <title>menuBarSlide</title>
    <style> 
        #menuBarSlide {  /*To highligth your div*/
            position: absolute;
            background-color: grey;
            color: red;
        }
    </style>
</head>

<body>
    <div class="navMenuItem hamburger" onclick="hamburger()">
       <span class="ham-icon">Item1</span>
       <span class="ham-icon">Item2</span>
       <span class="ham-icon">Item3</span>
    </div>

    <div id="menuBarSlide">
      <h1>menuBarSlide</h1>
    </div>

    <script>
        var hamburger = function() {
            var menu = document.getElementById('menuBarSlide');

            console.log("before assing: " + menu.style.right); // To check the current style of the element

            menu.style.right = menu.style.right || "-100px"; // Assign -100px if is null, otherwise keep the same value

            console.log("after assing: " + menu.style.right); // To check the style after the asigment

            if (menu.style.right == "-100px") {
              menu.style.right = "30px";
            }    
            else {
              menu.style.right = "-100px";
            }
        }
    </script>

<body>
<html>

Button onclick event not firing on first click

You are attaching the event in the first click, so the code runs like you write.

You can remove the first function definition :

    var term = $('#txtUtente').val();

$('#btnSearch').click(function () {

    var winW = window.innerWidth;
    var winH = window.innerWidth;
    var dialogoverlay = document.getElementById('dialogoverlay');
    dialogoverlay.style.display = "block";
    dialogoverlay.style.height = winH + "px";

    $.ajax({
        url: 'DAL/WebService1.asmx/GetPTSID',
        method: 'post',
        contentType: 'application/json;charset=utf-8',
        data: JSON.stringify({ term: term }),
        dataType: 'json',
        success: function (data) {
            document.getElementById('dialogoverlay').style.display = 'none';

            $('#infoFoundID').html(data.d[0]);
            $('#foundInfoMessage, #userInformation').show();
            $('#registerProductInfo').hide();                    
            var partTable = $('#partTable tbody');

            $(data.d).each(function (index, id) {
                partTable.append('<tr> <td>' + id + '</td><td>' + '<input onclick="GetPartNumber();" id="Button1" type="button" value="Copy Number" />' + '</td></tr>');
            });
        },
        error: function (err) {
            console.log(err);
        }
    });
});

onClick event not working on first click in react

For me helped something like <button onClick={(e) => searchHandler(e)}>Search</button> after I read there

seems that the events where overlaping

'OnClick' function not running on first click, a second click is required

Your script actually does indeed trigger the first time. The problem is that your info1 element doesn't have a height of 5vh by default, so the function falls into the else condition the first time it is run. To correct this, either set info1.style.height = "5vh" before invoking the function for the first time, or set the desired 'first click' behaviour in the else conditional.

Onclick function not working on first click

Your code checks for a style attribute of right:-300px. Since there is no style attribute on #popup on load, the first click only sets a style attribute of right:-300px. Then, the second click sets it to "0", etc.

Note that style references the element's inline style and does not reference CSS applied by class.

I had some success by setting a default style attribute of -300px.

function openNav() {  navMenuStatus = document.getElementById('popup').style.right;  if (navMenuStatus == '-300px') {    document.getElementById('popup').style.right = '0px';  } else {    document.getElementById('popup').style.right = '-300px';  }}

.pmenu {  cursor: pointer;  width: 70px;  font-weight: 600;  color: #fff;  float: left;}
.pmenu img {  padding: 5px 11px;  background-color: #fff000;}
.pmenu p {  text-align: center;  padding: 10px 4px;  background-color: #356381;  margin: 0 0 0px;  font-size: 14px;}
.pbody {  color: #fff;  float: left;  width: 300px;  background-color: #356381;  border-left: 5px solid #fff000;}
.pbody p {  text-align: center;  font-size: 15px;  margin: 10px;}
.pbody h4 {  text-align: center;  font-weight: 600;  margin: 0px;  color: #000;  background-color: #fff000;  padding: 10px 0px;}
.pbody h5 {  font-size: 15px;  text-align: center;  background: #193e56;  padding: 15px;}
.address {  text-align: center;}
.address h6 {  color: #356381;  background-color: #fff000;  font-size: 14px;  padding: 10px 0px 10px 10px;  margin-top: 0px;  min-width: 245px;  text-align: left;}
.aicon {  float: left;  width: 50px;  background-color: #193e56;  color: #fff;  padding: 14px 12px;}
.aadd {  float: left;  color: #fff;}
.popup {  position: absolute;  right: -300px;  top: 20px;  z-index: 3;  transition: 0.3s all;}

<div class="popup" id="popup" style="right:-300px">  <div class="pmenu" onclick="openNav()">    <p>GET THE<br/>BOOK</p>    <img src="del.png">  </div>  <div class="pbody">    <h4>HOW TO GET THE PHONEBOOK</h4>    <p>Books were delivered to every house in Lakewood and surrounding areas during the month of February. </p>    <h5>If you did not receive one after this time you may pick one up at either one of the Wine on 9 locations.</h5>    <div class="address">      <div class="aicon">        <i class="fa fa-map-marker"></i>      </div>      <div class="aadd">        <h6><b>North location</b><br/> 6545 Rt 9 North, Howell, NJ 07731</h6>      </div>      <div class="aicon">        <i class="fa fa-map-marker"></i>      </div>      <div class="aadd">        <h6><b>South location</b><br/> 945 River Ave, Lakewood, NJ 08701</h6>      </div>    </div>  </div></div>

button onclick not working on first click

The truth about your code is the following..

You are assigning an onclick event to the window. when you click the window it then gets the buttons id which then assigns an onclick event to your button.
Your button only works when you click anywhere in the window (your browser User interface). You can try it and see

SOLUTION

remove the on window.onclick event stuff.

this should be the only code you should be seeing in your editor to make things work.

var displayNews = document.getElementById('currentNews');
var newsButton = document.getElementById('getnews');
newsButton.onclick = function(){
    alert('the button is clicked');
    var newsxr = new XMLHttpRequest();
    newsxr.onreadystatechange = function(){
        if(newsxr.readyState ===XMLHttpRequest.DONE && newsxr.status ===200){
            var currentNews = JSON.parse(newsxr.responseText);
            var currentArticles = currentNews['articles'];
            var numberArticles = currentNews['articles'].length;
            var newsDisplay ='';
            var author;
            var title;
            var description;
            var urlToImage;
            for(var i=0;i<numberArticles;i++){
                author = currentArticles[i]['author'];
                title = currentArticles[i]['title'];
                description = currentArticles[i]['description'];
                urlToImage = currentArticles[i]['urlToImage'];
                 newsDisplay = newsDisplay + "<p>"+"<span class='title'>"+  title+"</span>"+  "<br>"+description+"<br>"+"<img src='"+urlToImage+"'</img>"+"</p>";
            }
            alert('displaying the news now');
            console.log('current news is : ',currentNews);
            displayNews.innerHTML = newsDisplay;
        }
    };//on state change

    newsxr.open('GET','https://newsapi.org/v1/articles?source=national-geographic&sortBy=top&apiKey=1af110441a8e4f72925f78344e58c2a4',true);
    newsxr.send(null);
};
//button onclick function ends

I hope this was explanatory

onclick not firing on first click

Since on first click there is style.background='', it remains blue even when event is firing. Here is a one way to solve it.

function changeStyle() {       var a = document.getElementsByClassName('container')[1];    if (a.style.backgroundColor === 'blue' || a.style.backgroundColor === '') {     a.style.backgroundColor = 'red';    } else {     a.style.backgroundColor = 'blue';    }  }

.container {    display: block;    height: 100px;    background-color: blue;    border-bottom: 1px solid black;    cursor: pointer;}

<div class="container" onclick="changeStyle()"></div><div class="container"></div>

onclick function not working at first click

Your button has an inline onclick attribute that calls tester(). So on first click it'll do whatever tester() does - which is replace that with another onclick set to the anonymous function inside tester(). So then on second click it'll do what that second anonymous function does.

Try this instead:

var tester = function () {
    contact_box_kurv.innerHTML = ("").replace (/,/g, ''); 
    return false;
};

(I.e., have the desired functionality directly in tester().)

The Onclick Is Not Working on First Click