0

作为大学作业的一部分，我正在创建一个网站，所以我从《生活大爆炸》中选择了一个关于岩石、纸张、剪刀、蜥蜴、斯波克的主题。该网站只需要包含 HTML、CSS 和 JavaScript（所以请不要推荐 JQuery，因为它不在作业中）。我所有的 HTML 和 CSS 都还可以，只是我之前对 JS 做的不多。

我创建了一个包含不同选择的组合框，它们是：Rock、Paper、Scissors、Lizard 和 Spock。我在页面下方有3个文本框，我已经成功使用JS从组合框中获取文本值并将其放置在中间框中。但我想把比当前的东西更好的放在第一个盒子里，把它放在第三个盒子里，所以：

如果在组合框中选择了 Rock，则文本字符串“Rock”将放置在第二个（中间）框中，并且因为 Paper 击败 Rock，我希望在第一个框中输入“Paper”，并且因为 Rock 击败 Scissors我希望在第三个框中输入“剪刀”。

我希望它根据组合框中的选定值更改它的节拍和节拍的内容。

这是我到目前为止所拥有的，JS 是内部的。

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

非常感谢所有帮助。非常感谢和问候，克里斯

4

1 回答 1

1

你应该重命名标题

使用 javascript 获取下拉列表的值，然后有条件地填充其他输入字段。

这是整个脚本的概念证明：

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

这是一个小提琴示例

结果只有5个。

  1. 为您的结果建立一个真值表。

  2. 在相应 if 语句的 table var 中将每个表数据作为 json 输入。

  3. 将表作为真值表 var 返回

  4. 迭代数据并将值推送到适当的输入 ID

    示例： //为每个输入添加一个值 document.getElementById("srt").value = truthTable[0].value; document.getElementById("second").value = truthTable 1 .value; document.getElementById("第三个").value = truthTable 2 .value; document.getElementById("fourth").value = truthTable[3].value; document.getElementById("fifth").value = truthTable[4].value;

我认为这个例子告诉你该做什么，但也会让你了解你在做什么。

注意：我的示例触发 onClick，这不是您的情况的触发器，您需要使用其他东西。添加了链接以帮助遇到相同问题的其他人。

于 2013-06-17T15:31:54.310 回答