CODEWITHSUNDEEP
javascripthtmlcsstextcombobox
cm125192
cm125192

Reputation: 5

Use JS to get the value of a text box, then depending on what that value is enter text into to other textboxes

I am creating a website as part of an assignment in college, so I picked a topic on rock, paper, scissors, lizard, spock from The Big Bang Theory. The website needs to contain HTML, CSS and JavaScript only (so please don't suggest JQuery because its not in the assignment). All my HTML and CSS are okay, I just haven't done much with JS before.

I have created a combo box with different choices, these are: Rock, Paper, Scissors, Lizard and Spock. I have 3 text boxes below that on the page, I've successfully used JS to get the text value from the combo box and place it in the middle box. But I would like to put what beats the current thing in the first box and what it beats in the third box so:

If Rock was selected in the combo box then that string of text 'Rock' gets placed in the second (middle) box, and because Paper beats Rock I would like 'Paper' to be entered in the First box, and because Rock beats Scissors I would Like 'Scissors' to be entered in the third box.

I would like it to change to what it beats and what its beaten by depending on the selected value in the combo box.

Here is what I have so far, the JS is internal.

 <!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>



</head>
<body> 
<div class="font">
<Div class="Containment">

<div class="Heading">
<h1> A BEGINNERS GUIDE TO 
ROCK-PAPER-SCISSORS-LIZARD-SPOCK  </h1>
</div>
<br>

<diV class="Menu">
<a href="Index.html">The Game</a> | <a href="Rock.html">Rock</a> | <a href="paper.html">paper</a> | <a href="scissors.html">scissors</a> | <a href="Lizard.html">Lizard</a> | <a href="Spock.html">Spock</a>
</diV>
<br>
<img class="centerpic" src="images/rpsls2.Jpg" >
<br>
<center>

<div class="text">
Rock-paper-scissors-lizard-Spock is a five-gesture expansion 
of the classic selection method game rock-paper-scissors. 
It operates on the same basic principle, but includes two additional weapons: 
the lizard (formed by the hand as a sock-puppet-like mouth) 
and Spock (formed by the Star Trek Vulcan salute). 
This reduces the chances of a round ending in a tie.
 The game was invented by <br>
 Sam Kass with Karen Bryla.
 </div>
 </center>

<br>
<center> <iframe width="560" height="315" src="http://www.youtube.com/embed/x5Q6-wMx-K8" frameborder="0" allowfullscreen></iframe> 
<!-- This is the code to place and load my youtube linked video -->
<br>
<br>

<div class="text">

This game is featured numerous times in episodes of the Big Bang Theory and 
is normally used similar to why rock papers scissors is used, to settle indecisions, 
as Sheldon attempts to use it to get the office instead of Barry Kripke in this particular episode.
</div>
</center>
<br>
<br>

<div class="text">
Sign matchups:

Select your symbol of choice:
<select id="myList" onchange="Choice()">
  <option></option>
  <option>Rock</option>
  <option>Paper</option>  
  <option>Scissors</option>
  <option>Lizard</option>
  <option>Spock</option>
</select>
<br>
<br>
<input type="text" id="Wins1" width="10"> Beats
<input type="text" id="Choice" width="10"> Beats
<input type="text" id="Loses1" width="10">
<br>
<br>
<input type="text" id="Wins2" width="10">

<input type="text" id="Loses2" width="10">

<div>
</div>
</body>
</html>

All help is greatly appreciated. Many thanks and regards, Chris

Upvotes: 0

Views: 720

Answers (1)

Levi
Levi

Reputation: 1732

You should rename the title

Use javascript to get the value of a dropdown, then conditionally populate other input fields.

Here is the entire script proof of concept:

<script>
function run() {
    var truthTable = up();
    console.log (truthTable);
    //Add a value for each input   
    document.getElementById("srt").value = document.getElementById("Ultra").value;
}

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

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

}

</script>

Here is a fiddle example

There are only 5 outcomes.

  1. Build a truthTable for your outcomes.

  2. Enter each tables data as json in the table var of the appropriate if statement.

  3. return table as truthTable var

  4. Iterate data and push values to appropriate input IDs

    Example: //Add a value for each input document.getElementById("srt").value = truthTable[0].value; document.getElementById("second").value = truthTable1.value; document.getElementById("third").value = truthTable2.value; document.getElementById("fourth").value = truthTable[3].value; document.getElementById("fifth").value = truthTable[4].value;

I think this example tells you what to do, but will also let you learn what you are doing.

NOTE: My example fires onClick, this is NOT the trigger for your case, you need to use something else. Added links to help others who have the same issue.

Upvotes: 1

Related Questions