Please request user input in order to generate a multiplication chart

Is there a way to ensure that the program works properly so that when the user inputs a value, it is included in the multiplication table?

<html>
<head>
<title> Multiplication Table </title>
<style> 
body{
font-family: arial;
font-size: 20px;
}
</style>
</head>
<body>
<br>
<h3> Multiplication Table </h3>
<button onclick="myFunction()">Enter Number </button>
<script language ="JavaScript">
function myFunction(){
var num = prompt("Please enter your number", 0);
document.write("<center><table border ='1px'>");
for var (a =1; a <= num; a++) {
document.write("<tr style='height:40px'>");
for(var b =1; b<= 10; b++) {
document.write("<td style='width:40px'><center><font size = '4'>"  + a*b + "<.center></font></td>");
}
document.write("</tr>");
}
}
document.write("</table></center>");
</script>
</body>
</html>

Answer №1

It appears that there are several issues in your code. Please review the corrected example below:

  • The HTML tags in the following line were not properly closed, it should be document.write

    document.wirite("<center><table border ='1px');
    
  • For creating multiplication tables, we need to have a row tr for each value. Modify the for loop as shown below. Also, ensure that the center tags are closed properly!

    for (var a = 1; a < num; a++) {
        document.write("<tr><td style='width:40px'><center><font size = '4'>" + a * num + "</center></font></td></tr>");
    }
    

Please refer to the example below and let me know if you encounter any difficulties:

<html>

<head>
  <title> Multiplication Table </title>
  <style>
    body {
      font-family: arial;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <br>
  <h3> Multiplication Table </h3>
  <button onclick="myFunction()">Enter number </button>
  <script language="JavaScript">
    function myFunction() {
      var num = prompt("Please enter a number", 0);
      document.write("<center><table border ='1px'>");
      for (var a = 1; a < num; a++) {
        document.write("<tr><td style='width:40px'><center><font size = '4'>" + a * num + "</center></font></td></tr>");
      }
      document.write("</table></center>");
    }
  </script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Centering loaders within elements of an unordered list

I am working on a navbar that uses Bootstrap 3 and AngularJS. Within this navbar, I have an unordered list with li elements. Below is a snippet of my navbar: https://i.stack.imgur.com/o75Lp.png This is the code for my navbar: <div class="navbar-head ...

Preserve the custom hook's return value in the component's state

I am currently facing a challenge in saving a value obtained from a custom hook, which fetches data from the server, into the state of a functional component using useState. This is necessary because I anticipate changes to this value, requiring a rerender ...

TailwindCSS: Footer component overlaps central panel when scrolling on mobile devices

https://play.tailwindcss.com/notWWuhDpr?size=546x752 My project consists of three key components: The header A scrollable main panel The footer While it was relatively easy to implement this layout on the web using the code provided in the link above, I ...

Tips for showcasing an image on an HTML page

I am encountering an issue with my HTML page that includes a Button. When clicked, it is supposed to display an image using an Ajax call. The functionality works properly in Postman Rest Client. However, when accessed through a browser, it only shows raw ...

I am looking to have two elements positioned next to each other in equal dimensions, such as the reCaptcha feature

Could someone assist me in positioning these elements side by side, each taking up 50% of the screen? I'm unsure if this can be achieved while using the reCaptcha iFrame. <div class="g-recaptcha" data-sitekey="sitekey" style="transform:scale(0.5); ...

Quick Validator. Establishing a schema that relies on specific values

I have a situation where I need to differentiate between two types of users - teacher and student. The schema for a teacher looks like this: { username : string; firstName : string; lastName : string; type : 1; // 1 = teacher schoolId : o ...

Error in Access-Control-Allow-Origin when using Node.js and JSONP

It seems like JSONP eliminates cross domain restrictions. I am currently attempting to create a JSONP service with node and express. Below is a simple example of the code: self.routes['/portfolio'] = function(req, res) { // Website you wis ...

Using jQuery to handle multiple AJAX XML requests

Currently, I am working on developing a JavaScript XML parser using jQuery. The idea is that the parser will receive an XML file containing information along with multiple links to other XML files. As the parser runs, it will identify tags within the file ...

Working with Node.js and MySQL can involve using callbacks within nested queries

I am trying to add data to my database only if it doesn't already exist. While attempting this, I encountered an error message: { [Error: Cannot enqueue Query after invoking quit.] code: 'PROTOCOL_ENQUEUE_AFTER_QUIT', fatal: false } My ...

Dealing with extended render times in React applications

Currently, I'm working with a limited set of 100 documents per page and utilizing a wrapper component for certain conditional actions. const onClickCheckbox = (order: OrderProps) => { const _ordersToExport = [...ordersToExport]; const ind ...

Steps to bring life to your JavaScript counter animation

I need to slow down the counting of values in JavaScript from 0 to 100, so that it takes 3 seconds instead of happening instantly. Can anyone help me with this? <span><span id="counter"> </span> of 100 files</span> <s ...

Concealing Website Elements with javascript based on class assignments

Despite my hesitation, I have to ask this question after unsuccessful searches in related articles. In my code, I have 7 nav links all with the same class. Due to the length of the HTML, I am looking for a way to hide contents until the link is clicked, an ...

`Switching the selection in ng-selected`

I am having trouble toggling ng-selected options in Angular. I have tried the following approach: <select ng-model="datacut.ages" multiple> <option value="" disabled="disabled">Please Select</option> <option value="0-15" ng-clic ...

Unable to retrieve dropdown value using JavaScript and display it in a div

javaScript code: Retrieving data from a dropdown and displaying it in the inner HTML of a div. function showcost() { var days = document.getElementById("Ddays"); var Dudays = days.options[days.selectedIndex].text; var div = docu ...

Utilizing Material-UI Select for creating a number range dynamically

Seeking a solution to create a select element using material-ui that offers a range of numbers from 0 to 20,000,000 in increments of 25,000. Currently, I have accomplished this using a for loop. for (let price = 0; price <= 20000000; price = price + 250 ...

Using AJAX to populate a dropdown menu in a CodeIgniter application

I'm having an issue with using AJAX to populate a dropdown option. Here is the JavaScript code I am using: <script type="text/javascript"> $(document).ready(function(){ $("#sepatu").click(function(e){ e.preventDefault() ...

Styling a Pie or Doughnut Chart with CSS

I am working on creating a doughnut chart with rounded segments using Recharts, and I want it to end up looking similar to this: Although I have come close to achieving the desired result, I am encountering some issues: Firstly, the first segment is over ...

The type '{ children: Element[]; }' does not include the properties 'location' and 'navigator' that are present in the 'RouterProps' type

Struggling to implement React Router V6 with TypeScript, encountering a type error when including Routes within the `<Router />` component. The error message indicates that the children property passed to the Router is of an incorrect type, despite u ...

Explain the functioning of the Node.js event loop and its ability to manage numerous requests simultaneously

Recently, I delved into testing asynchronous code in node.js. From what I understand, when there is an asynchronous operation taking place, Node.js should be able to handle new requests. Below is a snippet of code I wrote using express and axios: app.get(& ...

Tips for enabling simultaneous input focus on both TextField and Popover components

I am working on a popover component that appears below a textfield component. The goal is to trigger a menu when the user types a specific key, like :, into the textfield. The user can then select an option from this menu to autocomplete the textfield. A ...