HTML functions don't return value when click on button

javascript function
javascript functions list
javascript function()
call javascript function from html
anonymous function javascript
javascript function parameters
how to call a function inside a function in javascript
how to call a function in javascript

I wrote the code provided. But on clicking the button, nothing appears.

function calculate() {
  var colony = document.getElementById("co").value;
  var dilution = document.getElementById("dil").value;
  var inoculum = document.getElementById("in").value;
  var b = parseFloat(dilution) * parseFloat(inoculum);
  var c = parseFloat(colony) / b;
  if (!isNaN(c)) {
    document.getElementById("multiplication").innerHTML = "the conentration is " + c;
  }
}
<button type="button" onclick="calculate">Calculate</button>
<p id="multiplication"></p>
  1. You didn't call calculate() function. It should be onclick="calculate()" not onclick="calculate".
  2. There's no value property in an element. Use innerText property of an element.

function calculate() {
  var colony = document.getElementById("co").innerText;
  var dilution = document.getElementById("dil").innerText;
  var inoculum = document.getElementById("in").innerText;
  var b = parseFloat(dilution) * parseFloat(inoculum);
  var c = parseFloat(colony) / b;
  if (!isNaN(c)) {
    document.getElementById("multiplication").innerHTML = "the conentration is " + c;
  }
}
<button type="button" onclick="calculate()">Calculate</button>
<p id="multiplication"></p>
<div id="co">1</div>
<div id="dil">2</div>
<div id="in">4</div>

JavaScript HTML DOM Methods, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Function parameters are listed inside the parentheses in the function definition.. Function arguments are the values received by the function when it is invoked.. Inside the function, the arguments (the parameters) behave as local variables.

I have added the HTML, which wasn't provided in the shared code and it works. It is permissible for input fields to not have an ID attribute.

Client Side:

function calculate() {
    var colony = document.getElementById("co").value;
    var dilution = document.getElementById("dil").value;
    var inoculum = document.getElementById("in").value;
    var b = parseFloat(dilution) * parseFloat(inoculum);
    var c = parseFloat(colony) / b;
    if (!isNaN(c)) {
        document.getElementById("multiplication").innerHTML =
            "the conentration is " + c;
    }
}

HTML:

    co: <input type="text" id="co"><br>
    dil: <input type="text" id="dil"><br>
    in: <input type="text" id="in"><br>
    <button type="button" onclick="calculate()">Calculate</button>
    <div id="multiplication">fff</div>

Functions :: Eloquent JavaScript, Functions that don't have a return statement at all, such as makeNoise , similarly return undefined . Parameters to a function behave like regular bindings, but their​  HTML is not a programming language; it is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.

In your inital code, your onclick="calculate" was missing () after calculate. I've added that as well as a script tag within your html with your JavaScript function without changing much of your original code's text.

Working Jsfiddle: https://jsfiddle.net/yuL58da1/

For presentation/educational purposes, I solved the problem using JQuery as well to show you what the solution would look like using JQuery.

Working JsFiddle: https://jsfiddle.net/4g9ayoqb/

Using the JQuery method, I've updated your html button to include a id attribute and removed onclick:

<button id="calculate" type="button">Calculate</button>

and added a JQuery click selector for that button's id:

$(document).on('click','#calculate',function()

Function return values, Some functions don't return a significant value, but others do. of HTML and CSS, JavaScript first steps, Functions — reusable blocks of code. Don't Use Functions Inside Angular Templates and What to Use Instead To make your app do stuff you need functions, right? It turns out that pipes can actually be more useful in some instances.

Functions, called output() , which takes a single parameter and outputs it in a paragraph on the page. Some functions don't return any value. (In these cases, our reference pages list the return value as void or undefined.) For example, in the displayMessage() function we built in the previous article, no specific value is returned when the function is invoked. It just makes a box appear somewhere on the screen — that's it!

JavaScript Functions, at the beginning of a file (in the head section), and call them later in the document. Azure Functions are not a web API-building-platform as such. A function gets triggered and receives input, runs some logic, and provides output. Functions can be chained into a pipeline that passes around messages. They can scale based on capacity needed to handle those incoming messages.

How to call a JavaScript function within an HTML body, using javascript. You decide at what point you want the javascript to be executed. (function { alert("I am here"); })(); This is an anonymous function, where the name is not specified. What happens here is that, the function is defined and executed together. Add this to the beginning or end of the body, depending on if it is to be executed before loading the page or soon after all the HTML elements are loaded.

Comments
  • Hello! Please read Question Check list and how to create a Minimal, Complete and Verifiable Example. You can also take the tour.
  • Can you please update the question with complete html you have wrote, the current code doesn't have ids co, dil, in
  • again... stevesouders.com/hpws/rule-js-bottom.php
  • The question contains no jQuery nor the jQuery tag
  • I've updated my answer showing both the Javascript way and the Jquery way to solve the problem. Just to show an example that JQuery could be used as well for educational purposes.