Utilize JavaScript to retrieve the content of an input box, and subsequently input text into two different textboxes based on the value obtained

Question

Utilize JavaScript to retrieve the content of an input box, and subsequently input text into two different textboxes based on the value obtained

In my college assignment, I'm working on a website about the game of rock, paper, scissors, lizard, Spock from The Big Bang Theory. The requirements are to use HTML, CSS, and JavaScript only, so please don't suggest JQuery as it's not allowed. While my HTML and CSS are fine, I need help with incorporating JavaScript, which is new to me.

I've set up a combo box with options for Rock, Paper, Scissors, Lizard, and Spock. Below that, I have three text boxes on the page. Currently, I'm able to use JS to get the selected value from the combo box and display it in the middle box. However, I'd like to also show what beats the selected option in the first box and what it beats in the third box. For example, if "Rock" is chosen, "Paper" should go in the first box and "Scissors" in the third box.

I want these values to update dynamically based on the selection from the combo box. Here's the HTML structure so far:

 <!Doctype html>
<html>

<head>
<link rel="stylesheet" type="text/css"
href="Web.css">
<script>
function Choice()
{
var mylist=document.getElementById("myList");
document.getElementById("Choice").value=mylist.options[mylist.selectedIndex].text;

var x= Choice.value;

}
</script>

...

</body>
</html>

Your guidance would be appreciated. Thank you, Chris

javascript html css text combobox

Answer 1

Answer №1

Consider changing the title

Utilize javascript to retrieve the dropdown value and dynamically fill other input fields based on conditions.

Below is a demonstration of the script in action:

<script>
function execute() {
    var resultTable = analyze();
    console.log(resultTable);
    
    document.getElementById("srt").value = document.getElementById("Ultra").value;
}

function analyze() {
    var selectedValue = document.getElementById("srt").value,
        resultTable;
    
    if(selectedValue === 'rock') {
        //assign values based on result table
    }
    else if (selectedValue === 'paper') {
        //assign values based on result table
        var table = [{ "first":"Paper" , "second":"Rock", "third":"Scissors", "fourth":"Lizard", "fifth":"Spock"}];
        console.log(table);
        return table;

    }
    else if (selectedValue === 'scissors') {
        //assign values based on result table
    }
    else if (selectedValue === 'lizard') {
        //assign values based on result table
    }
    else if (selectedValue === 'spock') {
        //assign values based on result table
    }    

}

</script>

Take a look at this fiddle example

There are only 5 possible outcomes.

Create a result table for your outcomes.
Enter the data for each table as json in the table variable within the corresponding if statement.
Return the table as resultTable variable
Go through the data and assign values to the appropriate input IDs

Example: //Assign a value for each input document.getElementById("srt").value = resultTable[0].value; document.getElementById("second").value = resultTable1.value; document.getElementById("third").value = resultTable2.value; document.getElementById("fourth").value = resultTable[3].value; document.getElementById("fifth").value = resultTable[4].value;

This example should guide you on what needs to be done, while also helping you understand the process.

NOTE: The example in my code executes onClick, which may not be suitable for your scenario. You will need to use a different trigger. Included links to assist others facing similar challenges.

Answer 2

Consider changing the title

Utilize javascript to retrieve the dropdown value and dynamically fill other input fields based on conditions.

Below is a demonstration of the script in action:

<script>
function execute() {
    var resultTable = analyze();
    console.log(resultTable);
    
    document.getElementById("srt").value = document.getElementById("Ultra").value;
}

function analyze() {
    var selectedValue = document.getElementById("srt").value,
        resultTable;
    
    if(selectedValue === 'rock') {
        //assign values based on result table
    }
    else if (selectedValue === 'paper') {
        //assign values based on result table
        var table = [{ "first":"Paper" , "second":"Rock", "third":"Scissors", "fourth":"Lizard", "fifth":"Spock"}];
        console.log(table);
        return table;

    }
    else if (selectedValue === 'scissors') {
        //assign values based on result table
    }
    else if (selectedValue === 'lizard') {
        //assign values based on result table
    }
    else if (selectedValue === 'spock') {
        //assign values based on result table
    }    

}

</script>

Take a look at this fiddle example

There are only 5 possible outcomes.

Create a result table for your outcomes.
Enter the data for each table as json in the table variable within the corresponding if statement.
Return the table as resultTable variable
Go through the data and assign values to the appropriate input IDs

Example: //Assign a value for each input document.getElementById("srt").value = resultTable[0].value; document.getElementById("second").value = resultTable1.value; document.getElementById("third").value = resultTable2.value; document.getElementById("fourth").value = resultTable[3].value; document.getElementById("fifth").value = resultTable[4].value;

This example should guide you on what needs to be done, while also helping you understand the process.

NOTE: The example in my code executes onClick, which may not be suitable for your scenario. You will need to use a different trigger. Included links to assist others facing similar challenges.

Utilize JavaScript to retrieve the content of an input box, and subsequently input text into two different textboxes based on the value obtained

Answer №1

Similar questions

How to effectively pass custom props or data to the Link component in Next JS

Troubleshooting: Twitter Bootstrap dropdown feature experiencing issues within navigation bar

Guide to switching a button using JavaScript

The H1 tag fails to appear on the webpage

Locate the element for a button or an image

Update the Vue component upon fetching new data

Merge two JSON objects together by matching their keys and maintaining the original values

Tips for incorporating an alt attribute into image tags using jquery

Box-sizing:border-box causing CSS padding problem in Firefox

How to transform multi-dimensional arrays to JSON format using JavaScript (and maybe jQuery)

What is the most effective way to include JavaScript code in a PDF file?

Keep the animation keyframes looping endlessly

When items are removed client-side, the Listbox becomes null

Adjust the height of the list when including or excluding floated list items that are not in the final row

Leveraging Firebase for data storage in creating XML files

JavaScript Troubleshooting: Fixing the "Uncaught error: undefinedModule" Issue

Leveraging server-sent events (SSE) for real-time updates on a web client using JavaScript

Verify the correctness of two password fields using jQuery

The AngularJS page on my website is currently stuck in the mobile version, and strangely, the Google Chrome console is

Error: unable to locate the react-redux context value; make sure the component is enclosed in a < Provider > tag