Interactions between JavaScript and HTML elements may fail to establish a connection

Question

Interactions between JavaScript and HTML elements may fail to establish a connection

I'm trying to establish a link between an input field and a paragraph where the paragraph will display the price multiplied by the number of people. For example, if the original cost was 7,000 for one person, then entering '2' in the input field should calculate it as 14,000. This functionality seems to be working fine on another page but not on mine for some reason. Apologies for my lack of expertise in this area!

/* Some JavaScript functions */

.some-styling {
  background: linear-gradient(0deg, rgba(187, 243, 249, 1), rgba(70, 139, 186, 1));
  /* Add your CSS styles here */
}

<div class="wrapper">
  <!-- Your HTML content goes here -->
</div>

javascript html css

Answer 1

Answer №1

Upon reviewing your JavaScript code, an error was discovered in the form of a minor spelling mistake. Specifically, take a closer look at this line:

var txtToPrice     = document.getElementById("txtToprice");

The word txtToprice contains a lowercase 'p' instead of an uppercase 'P'. Correcting this typo should resolve the issue you are facing with your code.

Answer 2

Upon reviewing your JavaScript code, an error was discovered in the form of a minor spelling mistake. Specifically, take a closer look at this line:

var txtToPrice     = document.getElementById("txtToprice");

The word txtToprice contains a lowercase 'p' instead of an uppercase 'P'. Correcting this typo should resolve the issue you are facing with your code.

Answer 3

Answer №2

What is the reason for adding 1 to the input value? Simply multiply it by your cost if there is a value, and default to 0.

var numberOfGuests = document.getElementById("numberOfGuests");
    var txtPrice       = document.getElementById("txtPrice");
    var txtToPrice     = document.getElementById("txtToPrice");
    var price          = 7000;

    numberOfGuests.oninput = function() {
        if (numberOfGuests.value.length){
            txtToPrice.innerHTML = (Number(numberOfGuests.value)) * price;
        } else {
            txtToPrice.innerHTML = 0;
        }
    }

#tb{
  float: right;
  margin-right: 10%;
  margin-top: -100px; 
  border: none;
}

<fieldset>
<p style="font-weight: bold;">Paymentinformation</p>

<p>It costs <span id="txtPrice">7000 </span>for one person</p>
<br>

<label style="font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;" for="numberOfGuests">Number of people: </label>
<input id="numberOfGuests" type="number" name="numberOfGuests" min="0" max="6">

<br>
<br>

<div id="tb">
   <p>Total <span id="txtToPrice">0</span></p>
</div>
<br>

</fieldset>

Answer 4

What is the reason for adding 1 to the input value? Simply multiply it by your cost if there is a value, and default to 0.

var numberOfGuests = document.getElementById("numberOfGuests");
    var txtPrice       = document.getElementById("txtPrice");
    var txtToPrice     = document.getElementById("txtToPrice");
    var price          = 7000;

    numberOfGuests.oninput = function() {
        if (numberOfGuests.value.length){
            txtToPrice.innerHTML = (Number(numberOfGuests.value)) * price;
        } else {
            txtToPrice.innerHTML = 0;
        }
    }

#tb{
  float: right;
  margin-right: 10%;
  margin-top: -100px; 
  border: none;
}

<fieldset>
<p style="font-weight: bold;">Paymentinformation</p>

<p>It costs <span id="txtPrice">7000 </span>for one person</p>
<br>

<label style="font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;" for="numberOfGuests">Number of people: </label>
<input id="numberOfGuests" type="number" name="numberOfGuests" min="0" max="6">

<br>
<br>

<div id="tb">
   <p>Total <span id="txtToPrice">0</span></p>
</div>
<br>

</fieldset>

Answer 5

Answer №3

After analyzing the content, it seems that the main query revolves around detecting changes in form elements using HTML and JavaScript to display a total. It would be more effective to simplify the process rather than getting overwhelmed by unnecessary code snippets. Explore this JSFiddle link for further reference.

<form id='myForm'>
  
  <div class='input-w'>
    <span class='label'>price</span>
    <input type='number' rel='price' value='75' />
  </div>
  
  <div class='input-w'>
    <span class='label'>number</span>
    <input type='number' rel='number' value='1' />
  </div>
  
  <p>
    <span rel='total'></span>
  </p>

</form>

...

// (jQuery included - clarity purposes)

var $myForm = $('#myForm');
var $price = $myForm.find('[rel="price"]');
var $number = $myForm.find('[rel="number"]');
var $total = $myForm.find('[rel="total"]');

var $inputs = $('#myForm').find('input');

$inputs.on('change', function() {
  var total = $price.val() * $number.val();
  $total.html(total);
}).trigger('change'); // initial trigger

Answer 6

After analyzing the content, it seems that the main query revolves around detecting changes in form elements using HTML and JavaScript to display a total. It would be more effective to simplify the process rather than getting overwhelmed by unnecessary code snippets. Explore this JSFiddle link for further reference.

<form id='myForm'>
  
  <div class='input-w'>
    <span class='label'>price</span>
    <input type='number' rel='price' value='75' />
  </div>
  
  <div class='input-w'>
    <span class='label'>number</span>
    <input type='number' rel='number' value='1' />
  </div>
  
  <p>
    <span rel='total'></span>
  </p>

</form>

...

// (jQuery included - clarity purposes)

var $myForm = $('#myForm');
var $price = $myForm.find('[rel="price"]');
var $number = $myForm.find('[rel="number"]');
var $total = $myForm.find('[rel="total"]');

var $inputs = $('#myForm').find('input');

$inputs.on('change', function() {
  var total = $price.val() * $number.val();
  $total.html(total);
}).trigger('change'); // initial trigger

Interactions between JavaScript and HTML elements may fail to establish a connection

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing flickering when animating CSS translate on a black background in WebKit?

How can we effectively incorporate dynamic CSS & SVG values using PHP?

Proper Alignment of Input Forms in Django and HTML

Why are columns in Bootstrap 4 Grid not floating?

What is the best way to remove the excess space beneath a column in Bootstrap 5?

A technique in JavaScript that allows for assigning object property values using an external variable

I am interested in developing a Menu system that features different categories and subcategories

Stop const expressions from being widened by type annotation

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand

Is it possible to implement a setInterval on the socket.io function within the componentDidMount or componentDidUpdate methods

jQuery: Implementing JavaScript on a page asynchronously through Ajax without triggering execution

The problem with generating an Ajax Iframe for a Spotify widget: x-frame error issue

What is the best way to transfer JavaScript variables to PHP?

Two distinct actions achieved through a single form using JavaScript

Utilizing a dropdown list in HTML to dynamically change images

Utilize MaterialUI's stepper component to jazz up your design with

What is the best way to implement multilanguage support in nodejs without relying on cookies or external modules?

jQuery - Code snippet for formatting numbers is not producing the desired results

Can the value of a key automatically default to the parent's value if it is not found in the child?

What issues are present in the Ajax script and the PHP radio input?