Question

In: Computer Science

This is a question on the inputs and outputs on Basic javascript application What is the...

This is a question on the inputs and outputs on Basic javascript application

  1. What is the displayed output of the application if the user inputs

Are: 1    in the first box, 2 in the second box, 3 in the third box, and 4 in the fourth box

Modify the HTML and javascript file in order to

  1. Creates an h1 and a span element

ii)          Accesses all the html elements, then adds the four input values as strings and sends the result

      to the paragraph element and the span element

<!DOCTYPE html>

<html>

<head>

<title> Javascript Example </title>

<script src ="please3_test.js" type ="text/javascript" defer> </script>

</head>

<body>

   <div>

<input id ="num1" type ="text" size ="3"/></br>

<input id ="num2" type ="text" size ="3"/></br>

<input id ="num3" type ="text" size ="3"/></br>

<input id ="num4" type ="text" size ="3"/></br>

<span id ="answer"> Show Output Here</span><br/>

<button id ="btn">Compute </button><br/>

    

</div>

</body>

</html>

please3_test.js

document.getElementById("btn").onclick = compute;

function compute() {

var input1 = document.getElementById("num1");

var input2 = document.getElementById("num2");

var input3 = document.getElementById("num3");

var input4 = document.getElementById("num4");

var answer2 = document.getElementById("answer");

var result = " ";

result= input2.value + input3.value + input4.value;

oddstr = 4;

var finstr = result + oddstr;

answer2.innerHTML = finstr;

result1 = parseInt(input1.value) +parseInt(input2.value) +parseInt(input3.value);

input4.value = result1;

}

Solutions

Expert Solution

If the user inputs 1,2,3,4 respectively, the output that will be displayed in the 4th textbox will be 6 and the output in the answer span tag will be 2344.

For the HTML and JS modification question, please see the code below.  The comments are provided for the better understanding of the logic.

HTML File

<!DOCTYPE html>
<html>
<head>
        <title> Javascript Example </title>
        <script src ="please3_test.js" type ="text/javascript" defer> </script>
</head>
<body>
        <div>
                <input id ="num1" type ="text" size ="3"/></br>
                <input id ="num2" type ="text" size ="3"/></br>
                <input id ="num3" type ="text" size ="3"/></br>
                <input id ="num4" type ="text" size ="3"/></br>
                <span id ="answer"></span><br/>
                
                <!--Declare the h1 tag and span tag here.  Provide the id field with a suitable name-->
                <h1 id="h1tag"></h1><br/>
                <span id="spantag"></span><br/>
                
                <button id ="btn">Compute </button><br/>
        </div>
</body>
</html>

Javascript file

document.getElementById("btn").onclick = compute;

function compute() {
        var input1 = document.getElementById("num1");
        var input2 = document.getElementById("num2");
        var input3 = document.getElementById("num3");
        var input4 = document.getElementById("num4");
        var result = " ";
        
        //Add the below lines of code.
        //The below line will concatenate the input from all the 4 fields as string.
        result = input1.value + input2.value + input3.value + input4.value;
        
        //The below lines will display the result in the newly created tags.
        document.getElementById("h1tag").innerHTML = result;
        document.getElementById("spantag").innerHTML = result;
}

The screenshots of the code and output are provided below.


Related Solutions

essay question: basic organizational structures (application question)
essay question: basic organizational structures (application question)
Write a JavaScript program that computes the average of a collection of numbers and then outputs...
Write a JavaScript program that computes the average of a collection of numbers and then outputs the total number of values that are greater than the average. An A grade is any score that is at least 20% greater than the average. The B grade is any score that is not an A, but is at least 10% greater than the average. An F grade is any score that is at least 20% less than the average. The D grade...
What are the advantages of importing inputs from Matlab and exporting outputs to the Matlab Workspace?...
What are the advantages of importing inputs from Matlab and exporting outputs to the Matlab Workspace? (Select all that apply). a. Simulation results can be analyzed further in Matlab. b. You can drag blocks from the Simulink Library Browser into the Matlab Workspace. c. You can import actual physical data into your model. d. Simulation results can be visualized with a wide variety of Matlab plotting functions.
Consider the following inputs and outputs associated with a DCS system.
  Consider the following inputs and outputs associated with a DCS system. It is interesting to note that EXACTLY the same could be applicable to a SCADA system (although the SCADA system could use either a dedicated RTU or else a PLC). Break the following signals up (either going to, or away from the RTU-type devices) and indicate which are: i) digital inputs, ii) digital outputs, iii) analog inputs and iv) analog outputs: 18.1 ( 1 mark) START signal 18.2...
Write a defining table and a JavaScript program that computes and outputs the rate of change...
Write a defining table and a JavaScript program that computes and outputs the rate of change of a price. The program must allow the user to enter a previous price and a current price. The formula for the rate of change is rateOfChange =  currPrice - prevPrice prevPrice Your program should allow a user to enter real numbers such as 7.54. If you wish, you may use the following HTML code in your program. <!DOCTYPE HTML> <html lang="en-us"> <head> <meta charset="utf-8">...
describe the inputs, the plants, and the outputs of open-loop control systems.
describe the inputs, the plants, and the outputs of open-loop control systems.
why the production function evaluates the relation between the inputs and outputs is important in the...
why the production function evaluates the relation between the inputs and outputs is important in the healthcare field.
The production function evaluates the relation between the inputs and outputs is important in the healthcare...
The production function evaluates the relation between the inputs and outputs is important in the healthcare field.
"Because the outputs of many industries are the inputs to other industries, the failure of any...
"Because the outputs of many industries are the inputs to other industries, the failure of any single industry to fulfil the output quantities specified in the central plan caused a chain reaction of adverse repercussions on production." This quotation best identifies the Multiple Choice incentive problem under central planning. self-sufficiency dilemma under communism. resource overcommitment problem under communism. coordination problem under central planning.
Create a static method with the appropriate inputs and outputs. Call each of them in the...
Create a static method with the appropriate inputs and outputs. Call each of them in the main method. Write a method called stringToListOfWords() which takes in a String converts it into a list of words. We assumes that each word in the input string is separated by whitespace.3 2Use the equals() method. 3The split() method of String can split an input up along a provided special string called a regular expression or regex. A regex is much like a code...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT