Question 204073 in Html Question posted in
Some basic documentation can be found here.

Html – I should see the result once I click the button, but I can't

I have made a random number generator as a practice.
But once I put this code in my WordPress blog and click the button, I cannot see any result come out. It appears in the making phase. But once post is published, I cannot see the result.
Could you please help what I should do? here is the code you can refer.

<!DOCTYPE html>
<html>
<head>
  <title>Number Generator</title>
  <style>
    /* Styles for the title, button, and result text */
    h1 {
      font-size: 32px;
      color: #333;
      text-align: center;
      margin-top: 40px;
    }

    #result {
      margin-top: 20px;
    }

    button {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 18px;
      color: #fff;
      background-color: #4CAF50;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
      background-color: #45a049;
    }

    h2 {
      font-size: 24px;
      color: #333;
      font-weight: bold;
    }

    h3 {
      font-size: 18px;
      color: #666;
    }
  </style>
  <script>
    function generateNumbers() {
      var fixedNumbers = [];
      var randomNumbers = [];
      var additionalNumber = 0;

      for (var i = 1; i <= 5; i++) {
        var inputElement = document.getElementById('fixedNumber' + i);
        var fixedNumber = parseInt(inputElement.value);

        if (!isNaN(fixedNumber) && fixedNumber >= 1 && fixedNumber <= 69) {
          fixedNumbers.push(fixedNumber);
        }
      }

      while (randomNumbers.length < (5 - fixedNumbers.length)) {
        var randomNumber = Math.floor(Math.random() * 69) + 1;

        if (!fixedNumbers.includes(randomNumber) && !randomNumbers.includes(randomNumber)) {
          randomNumbers.push(randomNumber);
        }
      }

      additionalNumber = Math.floor(Math.random() * 26) + 1;

      var resultDiv = document.getElementById('result');
      resultDiv.innerHTML = "<h2>Random Numbers: " + fixedNumbers.concat(randomNumbers).join(', ') + "</h2>" +
                            "<h3>additional number: " + additionalNumber + "</h3>";
    }
  </script>
</head>
<body>
  <h1>Number Generator</h1>
  
  <label for="fixedNumber1">Fixed Number 1:</label>
  <input type="number" id="fixedNumber1" min="1" max="69">
  <br>
  <label for="fixedNumber2">Fixed Number 2:</label>
  <input type="number" id="fixedNumber2" min="1" max="69">
  <br>
  <label for="fixedNumber3">Fixed Number 3:</label>
  <input type="number" id="fixedNumber3" min="1" max="69">
  <br>
  <label for="fixedNumber4">Fixed Number 4:</label>
  <input type="number" id="fixedNumber4" min="1" max="69">
  <br>
  <label for="fixedNumber5">Fixed Number 5:</label>
  <input type="number" id="fixedNumber5" min="1" max="69">
  <br>
  <button onclick="generateNumbers()">Generate Numbers</button>
  <div id="result"></div>

  <script>
    // Verify if JavaScript code is running
    console.log("JavaScript code is running...");
  </script>
</body>
</html>
Tags:

2

Answers


  1. 0

    It seems that you’re trying to embed a random number generator into your WordPress blog, but you’re experiencing issues with the code not producing any visible results once the post is published. Here are a few steps you can take to troubleshoot the problem:

    Check if JavaScript is enabled: Make sure that JavaScript is enabled in your browser. The random number generator relies on JavaScript to execute the code and display the results.

    Use the correct WordPress editor: Depending on the WordPress editor you’re using, the way you insert HTML and JavaScript code may vary. If you’re using the Block Editor (Gutenberg), make sure you’re adding the code within the HTML block or the Custom HTML block.

    Avoid conflicts with other plugins or themes: Sometimes, conflicts can occur between different JavaScript libraries or plugins on WordPress. Try disabling other plugins temporarily to see if any of them are interfering with your code. Additionally, switch to a default WordPress theme temporarily to see if the issue is related to your current theme.

    Check for JavaScript errors: Open your browser’s developer console by right-clicking on the page, selecting "Inspect" or "Inspect Element," and navigating to the "Console" tab. Look for any JavaScript errors or warnings that might be preventing the code from running correctly. Fixing these errors can help resolve the issue.

    Use inline JavaScript: Some WordPress editors or security plugins may prevent external JavaScript files from executing. To overcome this, you can try placing the JavaScript code directly within the HTML file instead of linking an external script.

    Cache issues: If you have a caching plugin enabled, it’s possible that the cached version of your page is not showing the updated code. Clear the cache or disable the caching plugin temporarily to see if that resolves the issue.

    By following these steps, you should be able to identify and resolve the issue preventing your random number generator code from working properly in your WordPress blog.

    Login or Signup to reply.
  2. 0

    As your JS codes are perfectly working so it seems like you are not inserting the JS codes in the WordPress site in the right place.

    Here is how you can add custom JavaScript codes into your WordPress site:

    First way:

    If you already have a script.js file connected to your theme then you can edit and insert these JS codes into it.

    Second way:

    You can also add these JS codes as a separate JS file by copying all these codes into a JS file and naming it number-generator.js and then put it into the correct directory.

    After that edit functions.php and add these codes below:

    wp_enqueue_script( 'you-name-it', get_template_directory_uri() . '/js/number-generator.js', array(), _S_VERSION, true );

}

add_action( 'wp_enqueue_scripts', 'you-name-it' );

    at the end but before the php closing tag which is ?> and save the file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search