Html - Getting a not a function error inside <form></form>

user26815150
August 14, 2024
198 views
0 votes
2 Answers

Currently working on a project but getting an error that the code used is not a function which is inside a <form></form>

Our project is a simple registration with auto compute function where in when I input the value on the attendee count, it would automatically show the value below the registration, it also has a view function for us to view the form first before we hit the submit button

<html>
<head>
    <title>Registration Form</title>
    <meta name="viewport" content="width=device-width">
    <link href="C:UsersAdminDesktopRegistration1galvanRegistration111.css" rel="stylesheet" type="text/css">
</head>

<script language="javascript">

function viewInput()
    {
        document.getElementById("KEG1").innerHTML = document.getElementById("KFname").value;
        document.getElementById("KEG2").innerHTML = document.getElementById("KLname").value;
        document.getElementById("KEG3").innerHTML = document.getElementById("KEmail").value;
        document.getElementById("KEG4").innerHTML = document.getElementById("KArea").value;
        document.getElementById("KEG5").innerHTML = document.getElementById("KPtn").value;
        document.getElementById("KEG6").innerHTML = document.getElementById("KAddress").value;
        document.getElementById("KEG7").innerHTML = document.getElementById("KCity").value;
        document.getElementById("KEG8").innerHTML = document.getElementById("KState").value;
        document.getElementById("KEG9").innerHTML = document.getElementById("KZip").value;
        document.getElementById("KEG10").innerHTML = document.getElementById("KCountry").value;
        document.getElementById("KEG11").innerHTML = document.getElementById("KCompany").value;
        
    }

    var numOne, numTwo, res, temp;
function compute()
{
  numOne = parseInt(document.getElementById("value1").value);
  numTwo = parseInt(document.getElementById("KAttendee").value);
  if(numOne && numTwo)
  {
    temp = document.getElementById("res");
    temp.style.display = "block";
    res = numOne * numTwo;
    document.getElementById("compute").value = "$" + res;
  }
}

function checkforblank() {

if (document.getElementById('KFname').value == "") {
    alert('Please enter your FIRST NAME');

    return false;   
}

if (document.getElementById('KLname').value == "") {
    alert('Please enter your LAST NAME');
    return false;
}

if (document.getElementById('KEmail').value == "") {
    alert('Please enter your EMAIL ADDRESS');
    return false;
}

if (document.getElementById('KArea').value == "") {
    alert('Please enter the AREA CODE');
    return false;
}

if (document.getElementById('KPtn').value == "") {
    alert('Please enter your PHONE NUMBER');
    return false;
}

if (document.getElementById('KAddress').value == "") {
    alert('Please enter your ADDRESS');
    return false;
}

if (document.getElementById('KCity').value == "") {
    alert('Please enter your CITY');
    return false;
}

if (document.getElementById('KState').value == "") {
    alert('Please enter your STATE');
    return false;
}

if (document.getElementById('KZip').value == "") {
    alert('Please enter the ZIP CODE');
    return false;
}

if (document.getElementById('KCountry').value == "") {
    alert('Please enter your COUNTRY');
    return false;
}

if (document.getElementById('KCompany').value == "") {
    alert('Please enter the name of the COMPANY');
    return false;
}

if (document.getElementById('KAttendee').value == "") {
    alert('Please enter the count of ATTENDEES');
    return false;
}

}

</script>

<body style="background-color: #ccd1d1"; text-align="MIDDLE">

<h1>Registration Form</h1>


<form method="post" action="C:UsersAdminDesktopRegistration1galvanMainPage.html" >
<table Name="Full Name">
 
<tr>
    <td><label>Full Name :</label></td>
    <td><input required type="text" id="KFname"><br></td>
    <td><input required type="text" id="KLname"><br></td>
</tr>

<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">First Name</label></td>
    <td><label class="lowerTxt">Last Name</label></td>
</tr>
</table>

<table Name="Email">
<tr>
    <td><label>E-Mail :</label></td>
    <td><input type="text" class="long" id="KEmail"><br></td>
</tr>
    
<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">[email protected]</label></td>
    </tr>
</table>

<table Name="Phone Number" Class="TablePhone">
<tr>
    <td><label>Phone Number :</label></td>
    <td><input type="number" id="KArea"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="3"><br></td>
    <td><input type="number" id="KPtn"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="10"><br></td>
</tr>
    
<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">Area Code</label></td>
    <td><label class="lowerTxt">Phone Number</label></td>
</tr>
</table>

<table Name="TableAddress">
<tr>
    <td><label>Address :</label></td>
    <td><input type="text" class="long" id="KAddress"><br></td>
</tr>
    
<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">Street Address</label></td>
</tr>
</table>    

<table Name="TableCity">
<tr>
    <td><label></label></td>
    <td><input type="text" id="KCity"><br></td>
    <td><input type="text" id="KState"><br></td>
</tr>

<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">City</label></td>
    <td><label class="lowerTxt">State/Province</label></td>
</tr>
</table>

<table class="TableZip">
<tr>
    <td><label></label></td>
    <td><input type="number" id="KZip"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="4"><br></td>
    <td><input type="text" id="KCountry"><br></td>
</tr>
    
<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">Postal/Zip Code</label></td>
    <td><label class="lowerTxt">Country</label></td>
</tr>
</table>

<table Name="Company">
<tr>
    <td><label>Company Name :</label></td>
    <td><input type="text" class="long" id="KCompany"><br></td>
</tr>
</table>

<table Name="Attendee">
<tr>
    <td><label>Attendee Count :</label></td>
    <input id="value1" type="hidden" value="500">
    <td class="dollar">$500 x <input type="number" class="value2" id="KAttendee"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="2" min='1' max='10'
        onclick="compute()" onkeyup="compute()" required></td>
</tr>
<tr>
    <td><label></label></td>
    <td class="Max">Max 10 Attendee</td>
</tr>
    

<script for ="value2">
        document.getElementsByClassName('value2')[0].oninput = function () {
        var max = parseInt(this.max);
        if (parseInt(this.value) > max) {
            this.value = max; 
        }
    }
</script>
</tr>
</table>

<br>

<div Name="Button1">
    <button class="Button1" type="submit" value="VIEW" onclick="viewInput(), checkforblank(); return false">VIEW</button>
</div>




<br>

<h1>Your Information</h1>

<div name="viewform">
    <p><label class="info1">FIRST NAME:</label>
    <span class="info2" id='KEG1' style="text-transform: uppercase;"></span></p>
    
    <p><label class="info1">LAST NAME:</label>
    <span class="info2" id='KEG2' style="text-transform: uppercase;"></span></p>
        
    <p><label class="info1">EMAIL:</label>
    <span class="info2" id='KEG3' style="text-transform: uppercase;"></span></p>
        
    <p><label class="info1">PHONE NUMBER:</label>
    <span class="info2" id='KEG4' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG5' style="text-transform: uppercase;"></span>
    </p>
        
    <p><label class="info1">ADDRESS:</label>
    <span class="info2" id='KEG6' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG7' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG8' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG9' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG10' style="text-transform: uppercase;"></span>
    </p>
        
    <p><label class="info1">COMPANY NAME:</label>
    <span class="info2" id='KEG11' style="text-transform: uppercase;"></span></p>
        
    <p><label class="info1">ATTENDEE COUNT:</label>
    <span class="info2" id='KEG12' style="text-transform: uppercase;"></span>
    </p>

    <p id="res"><label class="info1">TOTAL AMOUNT:</label>
    <input class="add" id="compute">
    </p>
</div>

<br>

<div Name="Button2">
    <input class="Button2" type="submit" onclick="viewInput()">
</div>


</form>
</body>

</html>

Answers

Change the function name compute() to myCompute() and then try again.

Also, do not forget to change the new name in OnClick events.

You can try the code snippet below.

<html>
<head>
    <title>Registration Form</title>
    <meta name="viewport" content="width=device-width">
    <link href="C:UsersAdminDesktopRegistration1galvanRegistration111.css" rel="stylesheet" type="text/css">
</head>

<script language="javascript">

function viewInput()
    {
        document.getElementById("KEG1").innerHTML = document.getElementById("KFname").value;
        document.getElementById("KEG2").innerHTML = document.getElementById("KLname").value;
        document.getElementById("KEG3").innerHTML = document.getElementById("KEmail").value;
        document.getElementById("KEG4").innerHTML = document.getElementById("KArea").value;
        document.getElementById("KEG5").innerHTML = document.getElementById("KPtn").value;
        document.getElementById("KEG6").innerHTML = document.getElementById("KAddress").value;
        document.getElementById("KEG7").innerHTML = document.getElementById("KCity").value;
        document.getElementById("KEG8").innerHTML = document.getElementById("KState").value;
        document.getElementById("KEG9").innerHTML = document.getElementById("KZip").value;
        document.getElementById("KEG10").innerHTML = document.getElementById("KCountry").value;
        document.getElementById("KEG11").innerHTML = document.getElementById("KCompany").value;
        
    }

    var numOne, numTwo, res, temp;
function myCompute()
{
  numOne = parseInt(document.getElementById("value1").value);
  numTwo = parseInt(document.getElementById("KAttendee").value);
  if(numOne && numTwo)
  {
    temp = document.getElementById("res");
    temp.style.display = "block";
    res = numOne * numTwo;
    document.getElementById("compute").value = "$" + res;
  }
}

function checkforblank() {

if (document.getElementById('KFname').value == "") {
    alert('Please enter your FIRST NAME');

    return false;   
}

if (document.getElementById('KLname').value == "") {
    alert('Please enter your LAST NAME');
    return false;
}

if (document.getElementById('KEmail').value == "") {
    alert('Please enter your EMAIL ADDRESS');
    return false;
}

if (document.getElementById('KArea').value == "") {
    alert('Please enter the AREA CODE');
    return false;
}

if (document.getElementById('KPtn').value == "") {
    alert('Please enter your PHONE NUMBER');
    return false;
}

if (document.getElementById('KAddress').value == "") {
    alert('Please enter your ADDRESS');
    return false;
}

if (document.getElementById('KCity').value == "") {
    alert('Please enter your CITY');
    return false;
}

if (document.getElementById('KState').value == "") {
    alert('Please enter your STATE');
    return false;
}

if (document.getElementById('KZip').value == "") {
    alert('Please enter the ZIP CODE');
    return false;
}

if (document.getElementById('KCountry').value == "") {
    alert('Please enter your COUNTRY');
    return false;
}

if (document.getElementById('KCompany').value == "") {
    alert('Please enter the name of the COMPANY');
    return false;
}

if (document.getElementById('KAttendee').value == "") {
    alert('Please enter the count of ATTENDEES');
    return false;
}

}

</script>

<body style="background-color: #ccd1d1"; text-align="MIDDLE">

<h1>Registration Form</h1>


<form method="post" action="C:UsersAdminDesktopRegistration1galvanMainPage.html" >
<table Name="Full Name">
 
<tr>
    <td><label>Full Name :</label></td>
    <td><input required type="text" id="KFname"><br></td>
    <td><input required type="text" id="KLname"><br></td>
</tr>

<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">First Name</label></td>
    <td><label class="lowerTxt">Last Name</label></td>
</tr>
</table>

<table Name="Email">
<tr>
    <td><label>E-Mail :</label></td>
    <td><input type="text" class="long" id="KEmail"><br></td>
</tr>
    
<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">[email protected]</label></td>
    </tr>
</table>

<table Name="Phone Number" Class="TablePhone">
<tr>
    <td><label>Phone Number :</label></td>
    <td><input type="number" id="KArea"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="3"><br></td>
    <td><input type="number" id="KPtn"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="10"><br></td>
</tr>
    
<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">Area Code</label></td>
    <td><label class="lowerTxt">Phone Number</label></td>
</tr>
</table>

<table Name="TableAddress">
<tr>
    <td><label>Address :</label></td>
    <td><input type="text" class="long" id="KAddress"><br></td>
</tr>
    
<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">Street Address</label></td>
</tr>
</table>    

<table Name="TableCity">
<tr>
    <td><label></label></td>
    <td><input type="text" id="KCity"><br></td>
    <td><input type="text" id="KState"><br></td>
</tr>

<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">City</label></td>
    <td><label class="lowerTxt">State/Province</label></td>
</tr>
</table>

<table class="TableZip">
<tr>
    <td><label></label></td>
    <td><input type="number" id="KZip"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="4"><br></td>
    <td><input type="text" id="KCountry"><br></td>
</tr>
    
<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">Postal/Zip Code</label></td>
    <td><label class="lowerTxt">Country</label></td>
</tr>
</table>

<table Name="Company">
<tr>
    <td><label>Company Name :</label></td>
    <td><input type="text" class="long" id="KCompany"><br></td>
</tr>
</table>

<table Name="Attendee">
<tr>
    <td><label>Attendee Count :</label></td>
    <input id="value1" type="hidden" value="500">
    <td class="dollar">$500 x <input type="number" class="value2" id="KAttendee"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="2" min='1' max='10'
        onclick="myCompute()" onkeyup="myCompute()" required></td>
</tr>
<tr>
    <td><label></label></td>
    <td class="Max">Max 10 Attendee</td>
</tr>
    

<script for ="value2">
        document.getElementsByClassName('value2')[0].oninput = function () {
        var max = parseInt(this.max);
        if (parseInt(this.value) > max) {
            this.value = max; 
        }
    }
</script>
</tr>
</table>

<br>

<div Name="Button1">
    <button class="Button1" type="submit" value="VIEW" onclick="viewInput(), checkforblank(); return false">VIEW</button>
</div>




<br>

<h1>Your Information</h1>

<div name="viewform">
    <p><label class="info1">FIRST NAME:</label>
    <span class="info2" id='KEG1' style="text-transform: uppercase;"></span></p>
    
    <p><label class="info1">LAST NAME:</label>
    <span class="info2" id='KEG2' style="text-transform: uppercase;"></span></p>
        
    <p><label class="info1">EMAIL:</label>
    <span class="info2" id='KEG3' style="text-transform: uppercase;"></span></p>
        
    <p><label class="info1">PHONE NUMBER:</label>
    <span class="info2" id='KEG4' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG5' style="text-transform: uppercase;"></span>
    </p>
        
    <p><label class="info1">ADDRESS:</label>
    <span class="info2" id='KEG6' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG7' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG8' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG9' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG10' style="text-transform: uppercase;"></span>
    </p>
        
    <p><label class="info1">COMPANY NAME:</label>
    <span class="info2" id='KEG11' style="text-transform: uppercase;"></span></p>
        
    <p><label class="info1">ATTENDEE COUNT:</label>
    <span class="info2" id='KEG12' style="text-transform: uppercase;"></span>
    </p>

    <p id="res"><label class="info1">TOTAL AMOUNT:</label>
    <input class="add" id="compute">
    </p>
</div>

<br>

<div Name="Button2">
    <input class="Button2" type="submit" onclick="viewInput()">
</div>


</form>
</body>

</html>

The problem is that you have a function called compute as well as an element whose id is compute and when you called compute(), Javascript took it as the element having that id and complained that it’s not a function. You will need to rename one of them:

<html>
<head>
    <title>Registration Form</title>
    <meta name="viewport" content="width=device-width">
    <link href="C:UsersAdminDesktopRegistration1galvanRegistration111.css" rel="stylesheet" type="text/css">
</head>

<script language="javascript">

function viewInput()
    {
        document.getElementById("KEG1").innerHTML = document.getElementById("KFname").value;
        document.getElementById("KEG2").innerHTML = document.getElementById("KLname").value;
        document.getElementById("KEG3").innerHTML = document.getElementById("KEmail").value;
        document.getElementById("KEG4").innerHTML = document.getElementById("KArea").value;
        document.getElementById("KEG5").innerHTML = document.getElementById("KPtn").value;
        document.getElementById("KEG6").innerHTML = document.getElementById("KAddress").value;
        document.getElementById("KEG7").innerHTML = document.getElementById("KCity").value;
        document.getElementById("KEG8").innerHTML = document.getElementById("KState").value;
        document.getElementById("KEG9").innerHTML = document.getElementById("KZip").value;
        document.getElementById("KEG10").innerHTML = document.getElementById("KCountry").value;
        document.getElementById("KEG11").innerHTML = document.getElementById("KCompany").value;
        
    }

    var numOne, numTwo, res, temp;
function compute()
{
  numOne = parseInt(document.getElementById("value1").value);
  numTwo = parseInt(document.getElementById("KAttendee").value);
  if(numOne && numTwo)
  {
    temp = document.getElementById("res");
    temp.style.display = "block";
    res = numOne * numTwo;
    document.getElementById("compute-element").value = "$" + res;
  }
}

function checkforblank() {

if (document.getElementById('KFname').value == "") {
    alert('Please enter your FIRST NAME');

    return false;   
}

if (document.getElementById('KLname').value == "") {
    alert('Please enter your LAST NAME');
    return false;
}

if (document.getElementById('KEmail').value == "") {
    alert('Please enter your EMAIL ADDRESS');
    return false;
}

if (document.getElementById('KArea').value == "") {
    alert('Please enter the AREA CODE');
    return false;
}

if (document.getElementById('KPtn').value == "") {
    alert('Please enter your PHONE NUMBER');
    return false;
}

if (document.getElementById('KAddress').value == "") {
    alert('Please enter your ADDRESS');
    return false;
}

if (document.getElementById('KCity').value == "") {
    alert('Please enter your CITY');
    return false;
}

if (document.getElementById('KState').value == "") {
    alert('Please enter your STATE');
    return false;
}

if (document.getElementById('KZip').value == "") {
    alert('Please enter the ZIP CODE');
    return false;
}

if (document.getElementById('KCountry').value == "") {
    alert('Please enter your COUNTRY');
    return false;
}

if (document.getElementById('KCompany').value == "") {
    alert('Please enter the name of the COMPANY');
    return false;
}

if (document.getElementById('KAttendee').value == "") {
    alert('Please enter the count of ATTENDEES');
    return false;
}

}

</script>

<body style="background-color: #ccd1d1"; text-align="MIDDLE">

<h1>Registration Form</h1>


<form method="post" action="C:UsersAdminDesktopRegistration1galvanMainPage.html" >
<table Name="Full Name">
 
<tr>
    <td><label>Full Name :</label></td>
    <td><input required type="text" id="KFname"><br></td>
    <td><input required type="text" id="KLname"><br></td>
</tr>

<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">First Name</label></td>
    <td><label class="lowerTxt">Last Name</label></td>
</tr>
</table>

<table Name="Email">
<tr>
    <td><label>E-Mail :</label></td>
    <td><input type="text" class="long" id="KEmail"><br></td>
</tr>
    
<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">[email protected]</label></td>
    </tr>
</table>

<table Name="Phone Number" Class="TablePhone">
<tr>
    <td><label>Phone Number :</label></td>
    <td><input type="number" id="KArea"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="3"><br></td>
    <td><input type="number" id="KPtn"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="10"><br></td>
</tr>
    
<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">Area Code</label></td>
    <td><label class="lowerTxt">Phone Number</label></td>
</tr>
</table>

<table Name="TableAddress">
<tr>
    <td><label>Address :</label></td>
    <td><input type="text" class="long" id="KAddress"><br></td>
</tr>
    
<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">Street Address</label></td>
</tr>
</table>    

<table Name="TableCity">
<tr>
    <td><label></label></td>
    <td><input type="text" id="KCity"><br></td>
    <td><input type="text" id="KState"><br></td>
</tr>

<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">City</label></td>
    <td><label class="lowerTxt">State/Province</label></td>
</tr>
</table>

<table class="TableZip">
<tr>
    <td><label></label></td>
    <td><input type="number" id="KZip"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="4"><br></td>
    <td><input type="text" id="KCountry"><br></td>
</tr>
    
<tr>
    <td><label></label></td>
    <td><label class="lowerTxt">Postal/Zip Code</label></td>
    <td><label class="lowerTxt">Country</label></td>
</tr>
</table>

<table Name="Company">
<tr>
    <td><label>Company Name :</label></td>
    <td><input type="text" class="long" id="KCompany"><br></td>
</tr>
</table>

<table Name="Attendee">
<tr>
    <td><label>Attendee Count :</label></td>
    <input id="value1" type="hidden" value="500">
    <td class="dollar">$500 x <input type="number" class="value2" id="KAttendee"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="2" min='1' max='10'
        onclick="compute()" onkeyup="compute()" required></td>
</tr>
<tr>
    <td><label></label></td>
    <td class="Max">Max 10 Attendee</td>
</tr>
    

<script for ="value2">
        document.getElementsByClassName('value2')[0].oninput = function () {
        var max = parseInt(this.max);
        if (parseInt(this.value) > max) {
            this.value = max; 
        }
    }
</script>
</tr>
</table>

<br>

<div Name="Button1">
    <button class="Button1" type="submit" value="VIEW" onclick="viewInput(), checkforblank(); return false">VIEW</button>
</div>




<br>

<h1>Your Information</h1>

<div name="viewform">
    <p><label class="info1">FIRST NAME:</label>
    <span class="info2" id='KEG1' style="text-transform: uppercase;"></span></p>
    
    <p><label class="info1">LAST NAME:</label>
    <span class="info2" id='KEG2' style="text-transform: uppercase;"></span></p>
        
    <p><label class="info1">EMAIL:</label>
    <span class="info2" id='KEG3' style="text-transform: uppercase;"></span></p>
        
    <p><label class="info1">PHONE NUMBER:</label>
    <span class="info2" id='KEG4' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG5' style="text-transform: uppercase;"></span>
    </p>
        
    <p><label class="info1">ADDRESS:</label>
    <span class="info2" id='KEG6' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG7' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG8' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG9' style="text-transform: uppercase;"></span>
    <span class="info2" id='KEG10' style="text-transform: uppercase;"></span>
    </p>
        
    <p><label class="info1">COMPANY NAME:</label>
    <span class="info2" id='KEG11' style="text-transform: uppercase;"></span></p>
        
    <p><label class="info1">ATTENDEE COUNT:</label>
    <span class="info2" id='KEG12' style="text-transform: uppercase;"></span>
    </p>

    <p id="res"><label class="info1">TOTAL AMOUNT:</label>
    <input class="add" id="compute-element">
    </p>
</div>

<br>

<div Name="Button2">
    <input class="Button2" type="submit" onclick="viewInput()">
</div>


</form>
</body>

</html>

See how an element with an id is recognized by Javascript:

console.log(foo);

<div id="foo"></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Getting a not a function error inside <form></form>

Answers