hypertext styling scripting numbers result

Question

hypertext styling scripting numbers result

As someone who isn't proficient in JavaScript, this question might have a very simple answer that I'm unaware of.

I am working with a grid consisting of 9 buttons, another grid with 9 radio type inputs, and an additional set of 5 radio type inputs. Each of these elements needs to be used in mathematical calculations to display the total cost on the page based on selected attributes like weight and length.

There are 3 specific areas where I need to see the calculated price displayed. I have the prices listed in an Excel sheet but I'm unsure how to create the function for this purpose. The function should be able to determine the price based on selections like the first button, third radio input, second radio input, their values, and the required math formula.

/* Your CSS styles here */

<!-- Your HTML code here -->

To clarify, I need to show the output of the formula on the orange background grid where I've already placed the 3 € signs.

javascript html css

Answer 1

Answer №1

The fundamental approach entails:

Attach a change event to the radio inputs
Upon changing the input value, compute the price
Display the correct price (or various prices) in each of the 3 elements

Here's a straightforward illustration:

document.querySelectorAll('input[type=radio]').forEach(function(input) {
  //add change event to each input
  input.onchange = function() {
    //calculation for price here, e.g.:
    var price;

    if (this.value == '0-1 kg') {
      price = 1;
    } else {
      price = 2;
    };

    //output price here
    document.querySelectorAll('.tabcosti .white')[0].innerText = price;
    document.querySelectorAll('.tabcosti .white')[1].innerText = price;
    document.querySelectorAll('.tabcosti .white')[2].innerText = price;
  };
})

body {
  font-family: "Open Sans", sans-serif;
}

.flex-col {
...
.btn2 {
  background-color: darkorange;
  color: white;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

<div class="justify evenly flex-row">
 ...
</div>

Answer 2

The fundamental approach entails:

Attach a change event to the radio inputs
Upon changing the input value, compute the price
Display the correct price (or various prices) in each of the 3 elements

Here's a straightforward illustration:

document.querySelectorAll('input[type=radio]').forEach(function(input) {
  //add change event to each input
  input.onchange = function() {
    //calculation for price here, e.g.:
    var price;

    if (this.value == '0-1 kg') {
      price = 1;
    } else {
      price = 2;
    };

    //output price here
    document.querySelectorAll('.tabcosti .white')[0].innerText = price;
    document.querySelectorAll('.tabcosti .white')[1].innerText = price;
    document.querySelectorAll('.tabcosti .white')[2].innerText = price;
  };
})

body {
  font-family: "Open Sans", sans-serif;
}

.flex-col {
...
.btn2 {
  background-color: darkorange;
  color: white;
  border: none;
  text-decoration: none;
  flex-grow: 1;
  margin: 10px;
  height: 30px;
}

<div class="justify evenly flex-row">
 ...
</div>

Answer 3

Answer №2

Apologies for the tardiness, but you can leverage the power of the jQuery change event to capture the value of the radio button that was clicked.

Below is a straightforward example:

document.getElementById('large').addEventListener('change', function() {
  var change = document.getElementById('large');
  var times = document.getElementById('times').value / 100;
  if (change.checked) {
    document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) * times;
  } else {
    document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) / times;
  }
});
// -------------------
$('input[name=course1]').mouseup(function(e) {
  console.log("Previously " + $('input[name=course1]:checked').val());
  var prevValue = parseInt($('input[name=course1]:checked').val());
  var newvalue = parseInt(e.currentTarget.value);
  console.log("Now " + newvalue);
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) - prevValue;
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) + newvalue;
  console.log("————————————————————");
});
$('input[name=course2]').mouseup(function(e) {
  console.log("Previously " + $('input[name=course2]:checked').val());
  var prevValue = parseInt($('input[name=course2]:checked').val());
  var newvalue = parseInt(e.currentTarget.value);
  console.log("Now " + newvalue);
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) - prevValue;
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) + newvalue;
  console.log("————————————————————");
});
$('input[name=course3]').mouseup(function(e) {
  console.log("Previously " + $('input[name=course3]:checked').val());
  var prevValue = parseInt($('input[name=course2]:checked').val());
  var newvalue = parseInt(e.currentTarget.value);
  console.log("Now " + newvalue);
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) - prevValue;
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) + newvalue;
  console.log("————————————————————");
});

function validate() {
  var value = parseInt(document.getElementById('times').value);
  if (value < 110 || value > 200 || value == "") {
    console.log('failure');
    document.getElementById('times').focus();
    document.getElementById('times').style.borderBottom = '2px solid #ff0000';
  } else {
    document.getElementById('times').style.borderBottom = '2px solid black';
  }
}

#calories::after {
  content: " calories in this meal";
}
#times:focus, #times {
  outline: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom:2px solid black;
}
#times {
  font-family: standard;
  border-bottom:none;
}

<button onclick="console.clear();">Console covering page? Click this button to get rid of all console messages!</button>
<hr>
<input type="checkbox" id="large" />
<label for="large">Large food (<input type="number" min="110" max="200" value="150" id="times" oninput="validate();" onchange="this.style.borderBottom = 'none';" />) % change! (click number to edit)</label>
<hr>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" checked="checked" name="course1" value="0" id="opt1" />
<label for="opt1">I don't want appetizer</label>
<div></div>
<input type="radio" name="course1" value="200" id="opt2" />
<label for="opt2">Peanuts</label>
<hr>
<input type="radio" checked="checked" name="course2" value="0" id="opt3" />
<label for="opt1">I don't want a main course</label>
<div></div>
<input type="radio" name="course2" value="1000" id="opt4" />
<label for="opt4">Pizza</label>
<div></div>
<input type="radio" name="course2" value="2000" id="opt5" />
<label for="opt5">A Whole Pizza</label>
<hr>
<input type="radio" checked="checked" name="course3" value="0" id="opt6" />
<label for="opt6">I don't want dessert!</label>
<div></div>
<input type="radio" name="course3" value="300" id="opt7" />
<label for="opt7">Brownie</label>
<div></div>
<input type="radio" name="course3" value="500" id="opt8" />
<label for="opt8">Cake</label>
<hr>
<p id="calories">0</p>

Answer 4

Apologies for the tardiness, but you can leverage the power of the jQuery change event to capture the value of the radio button that was clicked.

Below is a straightforward example:

document.getElementById('large').addEventListener('change', function() {
  var change = document.getElementById('large');
  var times = document.getElementById('times').value / 100;
  if (change.checked) {
    document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) * times;
  } else {
    document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) / times;
  }
});
// -------------------
$('input[name=course1]').mouseup(function(e) {
  console.log("Previously " + $('input[name=course1]:checked').val());
  var prevValue = parseInt($('input[name=course1]:checked').val());
  var newvalue = parseInt(e.currentTarget.value);
  console.log("Now " + newvalue);
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) - prevValue;
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) + newvalue;
  console.log("————————————————————");
});
$('input[name=course2]').mouseup(function(e) {
  console.log("Previously " + $('input[name=course2]:checked').val());
  var prevValue = parseInt($('input[name=course2]:checked').val());
  var newvalue = parseInt(e.currentTarget.value);
  console.log("Now " + newvalue);
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) - prevValue;
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) + newvalue;
  console.log("————————————————————");
});
$('input[name=course3]').mouseup(function(e) {
  console.log("Previously " + $('input[name=course3]:checked').val());
  var prevValue = parseInt($('input[name=course2]:checked').val());
  var newvalue = parseInt(e.currentTarget.value);
  console.log("Now " + newvalue);
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) - prevValue;
  document.getElementById('calories').innerHTML = parseInt(document.getElementById('calories').innerHTML) + newvalue;
  console.log("————————————————————");
});

function validate() {
  var value = parseInt(document.getElementById('times').value);
  if (value < 110 || value > 200 || value == "") {
    console.log('failure');
    document.getElementById('times').focus();
    document.getElementById('times').style.borderBottom = '2px solid #ff0000';
  } else {
    document.getElementById('times').style.borderBottom = '2px solid black';
  }
}

#calories::after {
  content: " calories in this meal";
}
#times:focus, #times {
  outline: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom:2px solid black;
}
#times {
  font-family: standard;
  border-bottom:none;
}

<button onclick="console.clear();">Console covering page? Click this button to get rid of all console messages!</button>
<hr>
<input type="checkbox" id="large" />
<label for="large">Large food (<input type="number" min="110" max="200" value="150" id="times" oninput="validate();" onchange="this.style.borderBottom = 'none';" />) % change! (click number to edit)</label>
<hr>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" checked="checked" name="course1" value="0" id="opt1" />
<label for="opt1">I don't want appetizer</label>
<div></div>
<input type="radio" name="course1" value="200" id="opt2" />
<label for="opt2">Peanuts</label>
<hr>
<input type="radio" checked="checked" name="course2" value="0" id="opt3" />
<label for="opt1">I don't want a main course</label>
<div></div>
<input type="radio" name="course2" value="1000" id="opt4" />
<label for="opt4">Pizza</label>
<div></div>
<input type="radio" name="course2" value="2000" id="opt5" />
<label for="opt5">A Whole Pizza</label>
<hr>
<input type="radio" checked="checked" name="course3" value="0" id="opt6" />
<label for="opt6">I don't want dessert!</label>
<div></div>
<input type="radio" name="course3" value="300" id="opt7" />
<label for="opt7">Brownie</label>
<div></div>
<input type="radio" name="course3" value="500" id="opt8" />
<label for="opt8">Cake</label>
<hr>
<p id="calories">0</p>

hypertext styling scripting numbers result

Answer №1

Answer №2

Similar questions

Utilize Vue.js to Customize Meta Title and Description

What is the best way to trigger useEffect when the state being used within the effect is expected to change during the course of the effect's

Ensuring the footer stays at the bottom of the page using Tailwindcss and ReactJS

Press the button corresponding to a specific custom data-id using the console

What is the process for implementing pagination in vue-tables-2 with a Laravel REST API?

The data from the Subscribe API call is gradually loading within the ngOnInit() function

Having difficulty aligning my navigation menu with HTML and CSS

Creating a grid UI in AngularJS using Typescript: utilizing functions as column values

Error in Javascript: unable to locate the imported module

AngularJS - Issue with retrieving the most recent entry during $routeChangeStart event

Are there any CSS styles available for targeting an element with any id?

The inner nested ng-repeat section is not properly binding to the scope variable and appears to be commented out

When using server-side rendering in React with AJAX, an error may occur if trying to call setState

The sidebar navigation is not appearing on Safari and IOS devices

Adjusting the size or compressing images during the upload process to Firebase

Decoding the Blueprint of Easel in JavaScript

What is the most effective approach for addressing errors in both the server and client sides while utilizing nodejs and express?

Ways to prevent position fixed from overlapping with footer?

Is there a way to obtain the ultimate outcome from an array of asynchronous functions efficiently?

Use PHP to dynamically assign a class to each <option> element within a loop