Assist in troubleshooting and pinpointing the solution to this issue

Question

Assist in troubleshooting and pinpointing the solution to this issue

function generateRandomString(length) {
  var result = "";
  var characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
  var charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

var input = document.getElementById("length");
console.log(generateRandomString(input));

<html>
  <body>
    <div>
      Enter the length of character:
      <input type="text" id="length" />
      <button onclick="generateRandomString(5)">Submit</button>
      <p id="result"></p>
    </div>
    <script type="text/javascript" src="app/index.js"></script>
  </body>
</html>

Please help me find the error. I cannot figure out why I'm not getting the output I expected. My goal is to display random text with a specific length based on the value entered in an HTML text field.

javascript

Answer 1

Answer №1

To address the issue of not displaying random text, I have made some updates to your code. Initially, I retrieve input data using

var num = +document.getElementById("num").value;

, where the plus sign is used for conversion into an integer. The reason why your code was not showing anything is because you had not included any code to display the result. To rectify this, you can use

document.getElementById("result").innerHTML = result

to show the output in a division element.

function stringGen(num) {
  var result = "";
  var alpha =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
  var alpha1 = alpha.length;
  for (var i = 0; i < num; i++) {
    result += alpha.charAt(Math.floor(Math.random() * alpha1));
  }
  return result;

}

function showResult(){
  var num = +document.getElementById("num").value;
  document.getElementById("result").innerHTML = stringGen(num);
 }

<div>
      Enter the length of character:
      <input type="text" id="num" />
      <button onclick="showResult()">submit</button>
      <p id="result"></p>
    </div>

Answer 2

To address the issue of not displaying random text, I have made some updates to your code. Initially, I retrieve input data using

var num = +document.getElementById("num").value;

, where the plus sign is used for conversion into an integer. The reason why your code was not showing anything is because you had not included any code to display the result. To rectify this, you can use

document.getElementById("result").innerHTML = result

to show the output in a division element.

function stringGen(num) {
  var result = "";
  var alpha =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
  var alpha1 = alpha.length;
  for (var i = 0; i < num; i++) {
    result += alpha.charAt(Math.floor(Math.random() * alpha1));
  }
  return result;

}

function showResult(){
  var num = +document.getElementById("num").value;
  document.getElementById("result").innerHTML = stringGen(num);
 }

<div>
      Enter the length of character:
      <input type="text" id="num" />
      <button onclick="showResult()">submit</button>
      <p id="result"></p>
    </div>

Assist in troubleshooting and pinpointing the solution to this issue

Answer №1

Similar questions

Accessing PHP output within Jquery

Updating a .txt file using JavaScript

I am experimenting with an express middleware that can either return next() or next("route")

Is it possible to show an image without altering the Box dimensions?

Updating the default value of a MUI TextField: Step-by-step guide

Is there a way to convert the existing JavaScript code for a hyperlink so that it can be triggered by clicking a button instead?

Is there a way to automatically close a created div by clicking anywhere outside of it?

What is the best way to dynamically pass JSON object values to PHP?

Order the variables in the dropdown menu based on the PHP variables

Ways to forward a webpage once validation has been completed

vue-dropzone fails to create thumbnails when a file is added

Choosing from a variety of tr elements

Refresh tab controllers in Angular JS on every click event

Encountering a ReferenceError stating that the window object is not defined while building a React Leaflet application

The custom directive in Vue utilizes the refreshed DOM element (also known as $el)

Hidden content from Vue router view

What is the best way to hide the input field when there are multiple parent classes present?

Issue with passing props to screen not displaying on initial load

Populate a PHP array with designated file types from a designated folder, to later be loaded into a JavaScript array

Update the class information using jQuery after performing an action and serialize the button's ID for AJAX requests