1

Hi I'm new to javascript and I'm practicing it by making an HTML file that has two inputs Number1 and Number2 and when I click the button the program should show me by using alert() the sum of the two numbers but I'm having a problem that it tells me the function that I created is not a function

Code:

function add() {
  var nm1, nm2, res;
  nm1 = document.getElementById('nm1').value;
  nm2 = document.getElementById('nm2').value;
  res = nm1 + nm2;
  return res;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href='style.css'>
  <script src='train.js'></script>
  <title>Document</title>
</head>

<body>
  <h1>Hello world</h1>
  <form action="#" name='add'>
    <label>Number1:</label><input type='number' name='nm1' id='nm1'>
    <label>Number2:</label><input type="number" name='nm2' id='nm2'>
    <input type="button" onclick="alert(add())" value="Add">
  </form>
</body>

</html>

the error is:

Uncaught TypeError: add is not a function

Not A Bot
  • 2,474
  • 2
  • 16
  • 33
Koussay Dhifi
  • 35
  • 1
  • 5
  • 1
    There is a function called `add` but you're looking at the `
    ` instead. Don't use `onclick` attributes. Use `addEventListener` instead. (For that matter, don't give `form` elements `name` attributes, they aren't allowed them. We've had `id` since the 90s).
     – Quentin Feb 15 '21 at 09:12
  • You should [learn how to use the label element properly](http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/). Without a for attribute or a form control inside it, a label is useless. – Quentin Feb 15 '21 at 09:12
  • 1
    Also, when you're handling input data with JS, you don't really need a `
    ` in the first place.
     –  Feb 15 '21 at 09:13
  • You need a form. It is a semantic grouping of controls that is useful to software like search engines and screen readers. – Quentin Feb 15 '21 at 09:15
  • @Quentin You don't need a form to learn JavaScript though, do you? –  Feb 15 '21 at 09:18
  • Here's proper code: https://jsfiddle.net/L70yoedm/ –  Feb 15 '21 at 09:19
  • 1
    There's no reason to use learning JavaScript as an excuse to write bad HTML. – Quentin Feb 15 '21 at 09:19
  • @Quentin So say "you should use a form", not "you need a form". –  Feb 15 '21 at 09:26
  • @ChrisG — You need a form in order for the HTML to be high quality, accessible, friendly to search engines and to not risk being in violation of various laws about discrimination around the world (several of these are unlikely to be issues *here* but its wise to get into good habits). You don't need a form to solve the immediate problem. – Quentin Feb 15 '21 at 09:28
  • @Quentin So we agree, great. –  Feb 15 '21 at 09:31

1 Answers1

-2

The following is solution to your problem. The way you have used form to submit values, is creating the issue. Remove it.

function add(){
    var nm1,nm2,res;
    nm1 = parseInt(document.getElementById('nm1').value);
    nm2 = parseInt(document.getElementById('nm2').value);
    res=nm1+nm2;
    return res;
}
<input type='number' id='nm1'>
<input type="number" id='nm2'>
<button onclick="alert(add())"> Add </button>
Deadpool
  • 7,811
  • 9
  • 44
  • 88
  • *Using* a form is not the problem, see my comment and the duplicate question. Forms are useful semantic tools and the code is better off with one. – Quentin Feb 15 '21 at 09:20
  • @Quentin - Yep, but removing it worked! I read it -- Also, "chris_G" said -- he really doesn't need one here ... I agree! :) – Deadpool Feb 15 '21 at 09:22
  • 1
    Removing it is a quick and dirty solution, there are better ones (even just removing the name attribute is better). You are wrong about not needing the form, it is an important accessibility feature. – Quentin Feb 15 '21 at 09:23
  • 1
    Well what I actually did was removing the form name it is useless (the form also is useless here) – Koussay Dhifi Feb 15 '21 at 09:26
  • @KoussayDhifi — I've just explained — twice — why the form isn't useless. – Quentin Feb 15 '21 at 09:26
  • @Quentin -- :) yes dude, we understood! it isn't. – Deadpool Feb 15 '21 at 09:27
  • @Quentin oh..I'm so sorry I didn't notice your comment(3rd time submitting a question here) – Koussay Dhifi Feb 15 '21 at 09:29