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

Choosing various data using Ajax

I am currently in the process of extracting various pieces of data from my insert.php page, including the post id, username, and user id. I intend to include other selected data as well. However, when trying to echo out multiple queries, all the informatio ...

Changing the shading of an arc in d3.js: Tips and tricks

I've been attempting to create a gauge with a needle that changes the background color of the ring for the past few days. My goal is to dynamically update the colors of an arc within a gauge I developed in d3.js This is my current gauge setup with t ...

Is there a way to adjust the width of the datepicker on my device?

I've been attempting to adjust the width of the date picker, but I'm having trouble achieving it. Below is my code: import React from "react"; import ReactDOM from "react-dom"; import { DatePicker, RangeDatePicker } from &qu ...

Rearrange element's placement using Jquery Drag & Drop

I am experiencing difficulties in positioning my elements after a drop event. Within my "list" of divs... In order to keep the divs together and update the list, I utilize jQuery's append function to move the element from the list to its designated ...

Tips for eliminating white frames or borders on the Mapbox canvas map

In my current project using Angular 10, I have integrated Mapbox to display path routes. Following the standard Angular practice of splitting components, I separated the map rendering component and called it into the main map component. However, I encounte ...

Extracting dynamic content from a webpage using Selenium with Javascript rendering capabilities

Seeking a way to extract data that populates the SVG elements on a specific page: The page seems to be driven by JavaScript, making traditional BeautifulSoup methods in Python ineffective. After inspecting the network for XHR requests, it doesn't see ...

Validation of OpenAPI requests on the client-side using React libraries

Is there a way to validate a request against a specific openAPI spec on the client side in a browser environment? I've spent countless hours searching and trying various openapi-tools, but all seem to be geared towards nodejs usage and not suitable f ...

Creating a regular expression variable in Mongoose: A step-by-step guide

I am looking for a solution to incorporate a variable pattern in mongoose: router.get('/search/:name', async(req, res) => { name = req.params.name; const products = await Product.find({ name: /.*name*/i }).limit(10); res.send(prod ...

CSS Dropdown Menu Malfunctioning

I recently created a navigation bar using some online tutorials, and everything seems to be working fine except for the drop-down menu. I've been struggling with it for hours and can't seem to find a solution. Any help would be greatly appreciate ...

What's preventing me from aligning this div in the center?

I'm trying to set up a layout with two centered columns for Tumblr posts on the left side, while keeping a sidebar on the right. Can someone help me achieve this? #wrapper /*applying styles for two columns*/ { display: inline-bloc ...

Set up the configuration for express to access an external API through proxy.conf.json while in production mode

I am currently managing two applications on Heroku, one being myserverapi (built with Spring Boot) and the other being a client-side Angular app named client. The server is hosted at myserver.heroku.com while the client resides at myclient.heroku.com. At t ...

Utilizing a CSS identifier with jQuery

I'm struggling with a basic .each statement for comments where I want a form at the bottom to add new comments. The goal is simple - when someone submits a comment, I want it to display just above and move the form down using jQuery. Although this fun ...

Utilizing DOMStringMap data to populate CSS URLs

I am attempting to create a universal CSS modification for a webpage element that resembles: <button data-action="link" class="cardImageContainer coveredImage cardContent itemAction lazy lazy-image-fadein-fast" data-blurhash="lo ...

Obtain a null value for the hidden field in ASP from a JavaScript parameter

Trying to transfer the selected parameter value from a dropdown menu to a hidden field but the hidden field always ends up empty. No errors in the JavaScript code when traced using browser debugger. What could be the issue? JavaScript $(document).ready( ...

Retrieving event.data from the input handler on a textarea element

I've spent the past few days researching this issue. Here's some context to help explain the goal: I have a textarea and I want it to detect special characters (like @) that I define as part of a dictionary. It should then display an autocomple ...

Safari not updating Angular ng-style properly

I created a simple carousel using Angular and CSS animations which works well in Chrome. However, I recently tested it in Safari and noticed that the click and drag functionality does not work. I've been trying to fix this issue for days and could use ...

Having issues with the functionality of jQuery. It needs to be able to override existing

I am trying to make it so that if yes2 == none, the element with class .bottomandroid is removed and instead, the element with class .cta is displayed. However, it doesn't seem to be working as expected. How can I fix this issue? else if (isAndroid) ...

Looping animations using AngularJS

I have implemented a custom directive to trigger an animation on an element when a specific field is empty on the page. However, I am facing an issue where the animation only works once when the user clicks the button with the directive. Subsequent clicks ...

Encountering issues with installing @vue/cli on Linux Ubuntu

Currently facing an issue while attempting to install the Vue CLI on Ubuntu (WSL). After running both yarn add global @vue/cli and npm install @vue/cli --global, it seems like the commands were successful. However, upon checking the version using vue --v ...

"Vertical Line Encoding: A Strategy for Improved Data

Can someone help me with a coding issue I'm facing on my website? I am trying to create three vertical lines to separate images in columns, but every time I exit the editor and preview the site, the position of the lines changes. I'm new to HTML ...