ZuoTi.Pro
Question

Write a html javascript program to do the following: the user inputs a number, for example,...

Write a html javascript program to do the following:

the user inputs a number, for example, 50
user presses a button, labeled START
the program creates 50 random buttons around the browser window
each button should be placed at a random location
each button should be labeled with a random number between 1 and 50
add the following features
every 2 seconds, move each button around by increment or decrementing its location
if the user clicks on a button, change its label to another random number between 1-50.


Code: so far...


<body>

Enter a number of buttons (1-50):
<br>
<input type="number" id="limit" value="">
<button id="myBtn" onclick="myFunction()">START</button>
<br>

<script>
//random number 100-999
var rnd = Math.floor(Math.random()*999 ) + 100;
  
  
function myFunction()
{
var b = document.getElementById("limit").value;
var i;
for (i=1;i<=b;i++){
var btn = document.createElement("BUTTON");
btn.innerHTML = "Button " + i;
document.body.appendChild(btn);
btn.onclick = function(){
btn.innerHTML = "Button" + rnd;
                   }
}
}
  

</script>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

CODE:

<body>

  Enter a number of buttons (1-50):

  <br />

  <input type="number" id="limit" value="" />

  <button id="myBtn" onclick="myFunction()">START</button>

  <br />

  <script>

    // function to move button

    function moveButton(b) {

      for (var i = 1; i <= b; i++) {

        var button = document.getElementById("button_" + i);

        // if random value is greater than increment position

        if (Math.random() > 0.5) {

          // offsetTop gives current top location then we add a random number between 1 to Input to change its position

          button.style.top =

            button.offsetTop + Math.floor(Math.random() * b + 1) + "px";

          button.style.left =

            button.offsetLeft + Math.floor(Math.random() * b + 1) + "px";

        }

        // decrement position

        else {

          button.style.top =

            button.offsetTop - Math.floor(Math.random() * b + 1) + "px";

          button.style.left =

            button.offsetLeft - Math.floor(Math.random() * b + 1) + "px";

        }

      }

    }

    function getRandomPosition(e) {

      // e.clientHeight gives height of current element

      // document.body.offsetHeight gives height of full HTML body

      var x = document.body.offsetHeight - e.clientHeight;

      var y = document.body.offsetWidth - e.clientWidth;

      // get random x position within the viewable range

      // and convert to int with math.floor

      var X = Math.floor(Math.random() * x);

      // get random x position within the viewable range

      var Y = Math.floor(Math.random() * y);

      return [X, Y];

    }

    function myFunction() {

      var b = document.getElementById("limit").value;

      for (var i = 1; i <= b; i++) {

        var btn = document.createElement("button");

        btn.setAttribute("style", "position:absolute;");

        // giving each button a id to track it later

        btn.setAttribute("id", "button_" + i);

        btn.innerHTML = "Button " + Math.floor(Math.random() * b + 1);

        document.body.appendChild(btn);

        // getting array of 2 elements x position and y posititon

        var xy = getRandomPosition(btn);

        // adding that position attribute to the buttons

        btn.style.top = xy[0] + "px";

        btn.style.left = xy[1] + "px";

        // on button click event listener

        btn.onclick = function() {

          // get the current button

          const newButton = document.getElementById(this.id);

          // and update the button body to a random number between 1 to Input

          newButton.innerHTML = "Button " + Math.floor(Math.random() * b + 1);

        };

      }

      // executinh moveButton() after every 2 ms i.e. 2 seconds

      setInterval(function() {

        moveButton(b);

      }, 2000);

    }

  </script>

</body>

OUTPUT:

Please upvote if you like my answer and comment below if you have any queries.

0 0
Add a comment
Know the answer?
Add Answer to:
Write a html javascript program to do the following: the user inputs a number, for example,...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • HTML , Javascript Canvas problem: could you pleaseeee help me to do these things- suppose, user...

    HTML , Javascript Canvas problem: could you pleaseeee help me to do these things- suppose, user draw a picture, then that picture(lines on Canvas) will be saved as commands, so when the user will refresh the webpage or when I will execute the code, then when I will press the "load" button, the last picture which I made will come on the canvas from localStorage. <!DOCTYPE html> <html> <head> <script> var commands = []; var start = 0; var c;...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • HTML Canvas: I have given my small html + js mix code below. By this program-...

    HTML Canvas: I have given my small html + js mix code below. By this program- I can just draw line, but after drawing any image I want to save the "image " on my desktop. I understand, I have to make a "button" to SAVE it and later if I want to load the picture, then I have to make a button on the webpage to "LOAD". But I am unable to understand the function I should write for...

  • I created an Html with tabs, then how do I import the constant character content of...

    I created an Html with tabs, then how do I import the constant character content of a JS into one of these tabs without editing that JS file? here is my page： <!DOCTYPE html> <html> <body>     <div id="main">         <span class="tab">             <button class="current">News</button>             <button>Create</button>             <button onclick="about()">About</button>             <button>Login</button>         </span>         <div class="con" style="display: block"> For news content</div>         <div class="con">For create content</div>         <div class="con" id="about">For about content</div>     </div> </body> <script type="text/javascript" src='strings.js'></script> <script>     var box = document.getElementById('main');     var btns = document.getElementsByTagName('button');     var divs =...

  • Need Help correcting last function runHanoi(A,C,B) so this program correctly calculates number of...

    Need Help correcting last function runHanoi(A,C,B) so this program correctly calculates number of moves made. Solving the Hanoi tower. Please post correct Javascript. This is used in jsfiddle. HTML: html> <schript src="TowerOfHanoi.js"</script> </script> <h1> Tower of Hanoi </h1> Enter the number of disks (Disk amount must be < 7): <br> <br> <input id = 'uInput' type = 'textbox' size = 10 > <button id = 'setup' onClick = 'insertDisks()'> Set up Tower of Hanoi </button> <button id=calc onClick = 'runHanoi(stackA,...

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • JavaScript (Please debug this code) When a user enters a string in the input box, the...

    JavaScript (Please debug this code) When a user enters a string in the input box, the program is designed to add the string to an array. When the array reaches a certain length, the program displays all the users' entries in a list on the page. When you finish debugging, the user's entry in the input box should be cleared each time the submit button is clicked. Additionally, after five strings are submitted, the entire list of submitted strings should...

  • Create an HTML form that takes these inputs: Number of rows, and number of columns. This...

    Create an HTML form that takes these inputs: Number of rows, and number of columns. This form will submit to a PHP page. Create that page that will accept input from the HTML form and generates the table from the user's input. I already have the portion that generates the table based on user input by using Javascript in an HTML page, I just need to know how to generate the table using a PHP page instead. Here's the code...

  • I am trying to create a slide show using JavaScript. This is what I have so...

    I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...

  • LANGUAGE JAVASCRIPT, PHP Need help with PHP and ajax code. The user needs to login but,...

    LANGUAGE JAVASCRIPT, PHP Need help with PHP and ajax code. The user needs to login but, I keep getting an error that I coded "Wrong username and password!" ***PLEASE DONT GIVE ME A NEW CODE THAT IS NOWHERE NEAR THE CODE I SUBMITTED***** PLEASE LOOK AT THE CODE AND SEE ANY ISSUES login.html <!DOCTYPE html> <html> <head> <title>login popup</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> body { background-color: white; } </style> </head> <body> <center> <h1 style="text-align: center;"> Login </h1> <form>             Login ID:...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT