Joseph  Norton

Joseph Norton

1550039490

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

So, I have a pair of elements that have an onClick function known as timeline1(). However, the script does not run when the div is clicked the first time, yet runs fine after an additional click. Below is the HTML code:

<div class="Section_Timeline_Bullet">
            <div class="Section_Timeline_Bullet_Connector"></div>
            <img src="images/RightArrow.png" id="RightArrow1" onclick="timeline1()">
            <div class="Section_Timeline_Bullet_Info" id="Info1" onclick="timeline1()">12/02/2019</div>
        </div>

and this is the corresponding Javascript function that should be running from the first click:

function timeline1() {
var arrow1 = document.getElementById('RightArrow1');
var info1 = document.getElementById('Info1');

if (info1.style.height == “5vh”) {
arrow1.classList.add(“Section_Timeline_Rotated_Image_Up”);
arrow1.style.transition = “all 0.5s ease”;
arrow1.style.left = “-0.65vw”;
info1.style.top = “-42vh”;
info1.style.height = “20vh”;
info1.style.transition = “all 0.5s ease”;
} else {
arrow1.classList.remove(“Section_Timeline_Rotated_Image_Up”);
arrow1.style.transition = “0”;
arrow1.style.left = “-0.5vw”;
info1.style.height = “5vh”;
info1.style.top = “-27vh”;
info1.style.transition = “0”;
}

}

The only thing that the arrow1.classList.add("Section_Timeline_Rotated_Image_Up); part does is rotate the image, which still does not run on the first click of the div as well. Any help as to why the function doesn’t run on the first click, but does on the second would be appreciated.

TL;DR: Clicking on element doesn’t run its onClick the first time, but clicking again runs it fine… Help D:

#javascript #html #css #function

What is GEEK

Buddha Community

Kao Candy

1550045109

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.

Joseph  Norton

Joseph Norton

1550039490

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

So, I have a pair of elements that have an onClick function known as timeline1(). However, the script does not run when the div is clicked the first time, yet runs fine after an additional click. Below is the HTML code:

<div class="Section_Timeline_Bullet">
            <div class="Section_Timeline_Bullet_Connector"></div>
            <img src="images/RightArrow.png" id="RightArrow1" onclick="timeline1()">
            <div class="Section_Timeline_Bullet_Info" id="Info1" onclick="timeline1()">12/02/2019</div>
        </div>

and this is the corresponding Javascript function that should be running from the first click:

function timeline1() {
var arrow1 = document.getElementById('RightArrow1');
var info1 = document.getElementById('Info1');

if (info1.style.height == “5vh”) {
arrow1.classList.add(“Section_Timeline_Rotated_Image_Up”);
arrow1.style.transition = “all 0.5s ease”;
arrow1.style.left = “-0.65vw”;
info1.style.top = “-42vh”;
info1.style.height = “20vh”;
info1.style.transition = “all 0.5s ease”;
} else {
arrow1.classList.remove(“Section_Timeline_Rotated_Image_Up”);
arrow1.style.transition = “0”;
arrow1.style.left = “-0.5vw”;
info1.style.height = “5vh”;
info1.style.top = “-27vh”;
info1.style.transition = “0”;
}

}

The only thing that the arrow1.classList.add("Section_Timeline_Rotated_Image_Up); part does is rotate the image, which still does not run on the first click of the div as well. Any help as to why the function doesn’t run on the first click, but does on the second would be appreciated.

TL;DR: Clicking on element doesn’t run its onClick the first time, but clicking again runs it fine… Help D:

#javascript #html #css #function

Vincent Lab

Vincent Lab

1605017502

The Difference Between Regular Functions and Arrow Functions in JavaScript

Other then the syntactical differences. The main difference is the way the this keyword behaves? In an arrow function, the this keyword remains the same throughout the life-cycle of the function and is always bound to the value of this in the closest non-arrow parent function. Arrow functions can never be constructor functions so they can never be invoked with the new keyword. And they can never have duplicate named parameters like a regular function not using strict mode.

Here are a few code examples to show you some of the differences
this.name = "Bob";

const person = {
name: “Jon”,

<span style="color: #008000">// Regular function</span>
func1: <span style="color: #0000ff">function</span> () {
    console.log(<span style="color: #0000ff">this</span>);
},

<span style="color: #008000">// Arrow function</span>
func2: () =&gt; {
    console.log(<span style="color: #0000ff">this</span>);
}

}

person.func1(); // Call the Regular function
// Output: {name:“Jon”, func1:[Function: func1], func2:[Function: func2]}

person.func2(); // Call the Arrow function
// Output: {name:“Bob”}

The new keyword with an arrow function
const person = (name) => console.log("Your name is " + name);
const bob = new person("Bob");
// Uncaught TypeError: person is not a constructor

If you want to see a visual presentation on the differences, then you can see the video below:

#arrow functions #javascript #regular functions #arrow functions vs normal functions #difference between functions and arrow functions

Tia  Gottlieb

Tia Gottlieb

1598258520

Activation Functions, Optimization Techniques, and Loss Functions

Activation Functions:

A significant piece of a neural system Activation function is numerical conditions that decide the yield of a neural system. The capacity is joined to every neuron in the system and decides if it ought to be initiated (“fired”) or not, founded on whether every neuron’s info is applicable for the model’s expectation. Initiation works likewise help standardize the yield of every neuron to a range somewhere in the range of 1 and 0 or between — 1 and 1.

Progressively, neural systems use linear and non-linear activation functions, which can enable the system to learn complex information, figure and adapt practically any capacity speaking to an inquiry, and give precise forecasts.

Linear Activation Functions:

**Step-Up: **Activation functions are dynamic units of neural systems. They figure the net yield of a neural node. In this, Heaviside step work is one of the most widely recognized initiation work in neural systems. The capacity produces paired yield. That is the motivation behind why it is additionally called paired advanced capacity.

The capacity produces 1 (or valid) when info passes edge limit though it produces 0 (or bogus) when information doesn’t pass edge. That is the reason, they are extremely valuable for paired order studies. Every rationale capacity can be actualized by neural systems. In this way, step work is usually utilized in crude neural systems without concealed layer or generally referred to name as single-layer perceptions.

#machine-learning #activation-functions #loss-function #optimization-algorithms #towards-data-science #function

Dejah  Reinger

Dejah Reinger

1599921480

API-First, Mobile-First, Design-First... How Do I Know Where to Start?

Dear Frustrated,

I understand your frustration and I have some good news and bad news.

Bad News First (First joke!)
  • Stick around another 5-10 years and there will be plenty more firsts to add to your collection!
  • Definitions of these Firsts can vary from expert to expert.
  • You cannot just pick a single first and run with it. No first is an island. You will probably end up using a lot of these…

Good News

While there are a lot of different “first” methodologies out there, some are very similar and have just matured just as our technology stack has.

Here is the first stack I recommend looking at when you are starting a new project:

1. Design-First (Big Picture)

Know the high-level, big-picture view of what you are building. Define the problem you are solving and the requirements to solve it. Are you going to need a Mobile app? Website? Something else?

Have the foresight to realize that whatever you think you will need, it will change in the future. I am not saying design for every possible outcome but use wisdom and listen to your experts.

2. API First

API First means you think of APIs as being in the center of your little universe. APIs run the world and they are the core to every (well, almost every) technical product you put on a user’s phone, computer, watch, tv, etc. If you break this first, you will find yourself in a world of hurt.

Part of this First is the knowledge that you better focus on your API first, before you start looking at your web page, mobile app, etc. If you try to build your mobile app first and then go back and try to create an API that matches the particular needs of that one app, the above world of hurt applies.

Not only this but having a working API will make design/implementation of your mobile app or website MUCH easier!

Another important point to remember. There will most likely be another client that needs what this API is handing out so take that into consideration as well.

3. API Design First and Code-First

I’ve grouped these next two together. Now I know I am going to take a lot of flak for this but hear me out.

Code-First

I agree that you should always design your API first and not just dig into building it, However, code is a legitimate design tool, in the right hands. Not everyone wants to use some WYSIWYG tool that may or may not take add eons to your learning curve and timetable. Good Architects (and I mean GOOD!) can design out an API in a fraction of the time it takes to use some API design tools. I am NOT saying everyone should do this but don’t rule out Code-First because it has the word “Code” in it.

You have to know where to stop though.

Designing your API with code means you are doing design-only. You still have to work with the technical and non-technical members of your team to ensure that your API solves your business problem and is the best solution. If you can’t translate your code-design into some visual format that everyone can see and understand, DON’T use code.

#devops #integration #code first #design first #api first #api

Madyson  Reilly

Madyson Reilly

1601069940

Function Expression vs Function Declaration in JavaScript

Function Expression vs Function Declaration in JavaScript.

It was until during one of the JavaScript mock interviews did I came across the term function expression.

The question was: What is the difference between these two syntax?

function x(){

}

let x = function(){

}

I was clueless for a moment. After thinking a little, I could only come up with: the second syntax invokes an _anonymous _function and is assigned to a variable.

I was alien to the term hoisting.

In this article, we will acquaint ourselves with three simple terms: function declaration,_ function expression, _and hoisting.

What is function declaration?

Function declaration is also known as _function statement. _It contains the name of the function, parameters, and a return statement. **Naming the function **is what sets function declaration apart. Parameters and return statement is optional.

Image for post

Function Declaration

What is function expression?

Function expression also has a name, parameters, and return statement. All of which are optional. The important thing to bear in mind is: the function here is _assigned _to a JavaScript variable.

Image for post

Function Expression

#function-expression #function-declaration #functions-in-javascript #coding #javascript #express