Is it right to display the table of digit?

Question

I want to display the multiplication table of input digit but this code is not working well by using switch statement. Please tell me where is mistake in this code.

const tables = (num) => {
  switch (num.value) {
    case num.value.match(/[0-9]+$/):
      for (var i = 1; i <= 10; i++) {
        document.write(`${num.value} * ${i} = ${num.value * i}<br>`)
      }
      break;
    default:
      return alert(`Invalid Entry!`)
      break;
  }
}

<body>

  <p>Enter a number to get table: </p>
  <input id="number" type="text">
  <input type="submit" onclick="tables(number)">

</body>

What does the code do that you don't expect it to do, and/or what does the code not do that you expect it to do? — Heretic Monkey, Jun 01 '20 at 15:05
i expect to display the table of input number, but it shows the message Invalid Entry! — Mian Danial, Jun 01 '20 at 15:13
There are no `table` elements in your code, so this code won't show a table. Also [`document.write` is considered bad practice by many](https://stackoverflow.com/q/802854/215552). I encourage you to look at some modern tutorials on event handling (using `addEventListener`). — Heretic Monkey, Jun 01 '20 at 15:19
`num.value` will return a string. `num.value.match(/[0-9]*$/)` will return an array. Those will never match. — Heretic Monkey, Jun 01 '20 at 15:21
Hey @MianDanial, could my answer below help you find a solution? Do you have more questions or need some clarifying? — Barthy, Jun 02 '20 at 17:31

Barthy · Answer 1 · 2020-06-02T08:46:18.970

This is a classic use case for an if statement:

const input = document.getElementById('number')
const button = document.getElementById('button')

button.addEventListener('click', tables)


function tables() {
  const value = input.value

  if (null === value.match(/^[0-9]+$/)) {
    // if the value doesn't only consist of numeric symbols
    // alert a message and return (stop executing the function)
    alert(`Invalid Entry!`)
    return 
  }

  // if the user input is valid, proceed with the output
  for (let i = 1; i <= 10; i++) {
    document.write(`${value} &times; ${i} = ${value * i}<br>`)
  }
}

<p>Enter a number to get table: </p>
<input id="number" type="text">
<input id="button" type="submit">

Read about the difference between if and switch here.

Please also note that the regular expression you provided will not always work as intended, since it asserts that any number of digits can be found at the end of the string, without accounting for anything that comes before that. I added the start position symbol (^) to make sure that only strings containing only numbers from start to finish pass the test.

@HereticMonkey I disagree. Why do you say so? "Return value: An Array whose contents depend on the presence or absence of the global (g) flag, or null if no matches are found." However, you wold be right in saying that both the test and the regex can be improved. — Barthy, Jun 01 '20 at 16:06
Never mind, I need new glasses :). I saw the plus `+` as an asterisk `*`. — Heretic Monkey, Jun 01 '20 at 16:10

Is it right to display the table of digit?

1 Answers1