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

No data is being retrieved by SWR

detect mouse click coordinates within an iframe that spans multiple domains

What is the best way to differentiate the behavior of two identical classes using a single JavaScript function?

Aligning the stars with CSS

Utilizing Javascript within a PHP while loop to showcase map markers

What are some methods for singling out a specific table row?

Once I incorporated Bootstrap into my project, I noticed a noticeable white space between the div elements

cordova and nodejs causing a communication problem

When I set the width of my script to 100% in CSS, it causes the width to become distorted

Enhance a link using jQuery to allow it to expand and collapse

Sending a sound recording to the express js server with the help of multer

geolocation data not being updated in isolate scope binding

Python Mechanize file uploading capabilities

Encountering invalid parameters while attempting to utilize the track.scrobble service from the Last.Fm API in a Node.js application

What is the best approach to detect multiple .change() events on elements that are dynamically updated through AJAX interactions?

Having trouble configuring AJAX and PHP to work together

The styling of a CSS class in Internet Explorer may not be applied correctly if there are multiple elements sharing the same class name

What is the best way to eliminate the [lang tag] from a URL in Next.js?

Ensure all <li> tags within a HTML document exhibit consistent jquery mousedown and hover effects, abstaining from the assignment of unique IDs to each

What is the best way to detect and handle the destroy event in Kendo UI grids when a click event