Struggling to combine select dropdown choices in one calculation

Question

Struggling to combine select dropdown choices in one calculation

I'm currently working on a project where I need to create a website that multiplies three numbers selected from dropdown menus together. However, when I attempt to perform the calculation, I only get the result "1" displayed. I've spent several hours searching for solutions but haven't been able to find any changes that resolve the issue. Any help or suggestions would be greatly appreciated. Thank you!

<!doctype html>

<html lang="en>
<head> 
<title>
Test Project
</title>
<link rel="stylesheet" href="main.css" />

</head>
<meta charset="utf-8" /> </meta>
<body>

<div id="div_1" align="center">

    <header id="top_header">
        <h1>Test Project</h1> 
    </header>


</div>

<div align="center">

<select id="Section1">
    <option value="1"> 1</option>
    <option value="2"> 2</option>
    <option value="3"> 3</option>
    <option value="4"> 4</option>
    <option value="5"> 5</option>
    <option value="6"> 6</option>
    <option value="7"> 7</option>
    <option value="8"> 8</option>
    <option value="9"> 9</option>
    <option value="10"> 10</option>
</select>

<select id="Section2">
    <option value="1"> 1</option>
    <option value="2"> 2</option>
    <option value="3"> 3</option>
    <option value="4"> 4</option>
    <option value="5"> 5</option>
    <option value="6"> 6</option>
    <option value="7"> 7</option>
    <option value="8"> 8</option>
    <option value="9"> 9</option>
    <option value="10"> 10</option>
</select>

<select id="Section3">
    <option value="1"> 1</option>
    <option value="2"> 2</option>
    <option value="3"> 3</option>
    <option value="4"> 4</option>
    <option value="5"> 5</option>
    <option value="6"> 6</option>
    <option value="7"> 7</option>
    <option value="8"> 8</option>
    <option value="9"> 9</option>
    <option value="10"> 10</option>
</select>

    <script>
function myFunction() {
var x = document.getElementById("Section1").selectedIndex;
var y = document.getElementById("Section2").selectedIndex;
var z = document.getElementById("Section3").selectedIndex;
   alert(document.getElementsByTagName("Option")[x * y * z].value);
 }
</script>

<button onclick="myFunction()">Calculate</button>

</body>
</html>

javascript html css

Answer 1

Answer №1

The code snippet [x * y * z].value doesn't seem to be logical. Consider the following alternative:

function calculateValues() {
    var x = document.getElementById("Section1").value;
    var y = document.getElementById("Section2").value;
    var z = document.getElementById("Section3").value;
    alert(x * y * z);
}

You can also opt for using the selectedIndex method:

var section1 = document.getElementById("Section1");
var x = section1.options[section1.selectedIndex].value;
// continue with other sections accordingly..

Although, this approach may not be as straightforward.

Answer 2

The code snippet [x * y * z].value doesn't seem to be logical. Consider the following alternative:

function calculateValues() {
    var x = document.getElementById("Section1").value;
    var y = document.getElementById("Section2").value;
    var z = document.getElementById("Section3").value;
    alert(x * y * z);
}

You can also opt for using the selectedIndex method:

var section1 = document.getElementById("Section1");
var x = section1.options[section1.selectedIndex].value;
// continue with other sections accordingly..

Although, this approach may not be as straightforward.

Answer 3

Answer №2

This code snippet

alert(document.getElementsByTagName("Option")[x * y * z]);

will retrieve an option element with the index of x*y*z from the collection of all option elements on the current site.

Are you looking to achieve this specific result? Or are you simply interested in multiplying x, y, and z together:

alert(x * y * z)

If you want to see it in action, check out this jsfiddle link for a demonstration: http://jsfiddle.net/k475jso9/

Answer 4

This code snippet

alert(document.getElementsByTagName("Option")[x * y * z]);

will retrieve an option element with the index of x*y*z from the collection of all option elements on the current site.

Are you looking to achieve this specific result? Or are you simply interested in multiplying x, y, and z together:

alert(x * y * z)

If you want to see it in action, check out this jsfiddle link for a demonstration: http://jsfiddle.net/k475jso9/

Struggling to combine select dropdown choices in one calculation

Answer №1

Answer №2

Similar questions

Creating a flexible Tic Tac Toe board using only HTML and CSS without any JavaScript

When resizing the window, navigation items vanish

I would like to inquire about the process of accessing profile information on a website through the LinkedIn API

Attempting to update the state by utilizing the values provided by useContext

Place each label and input element on a separate line without using div tags

Retrieving information from a virtual document in a 'pre' save hook using Mongoose

Should I reload the entire table or insert a row manually?

What is the best way to break down this function from props in React?

React-Native Error: Invalid element type detected

How can I position a div in the center of a fullpage.js slide?

I am looking to integrate a WordPress blog post into my Bootstrap website

The React JS @material-ui/core Select component encountered an error when attempting to access a property that does not exist: 'offsetWidth'

Exploring the contrast of && and ?? in JavaScript

Implementing restriction measures for deterring harmful conduct within ExpressJS

Eliminate a specific element from the dataset

What could be causing the failure to retrieve the salt and hash values from the database in NodeJS?

Electron fails to display images in the compiled version

Ensuring User Data is Current in the UI with Firebase Auth Callbacks

What is the best way to incorporate a unique box shadow onto my svg image?

I require assistance in displaying a dynamic, multi-level nested object in HTML using AngularJS