如何在HTML頁面中顯示返回的值

我剛開始學習javascript，並在codeacademy上進行了一項練習，以製作文本基礎搖滾紙剪刀遊戲。我想將它展示給調試控制檯之外的某個人，但我無法弄清楚如何在html頁面中顯示它。如何在HTML頁面中顯示返回的值

在我的HTML文件中的代碼是：

<HTML> 

    <HEAD> 
     <script src="rockpaperscissors.js"></script> 
    </HEAD> 

    <BODY>Choose rock, paper or scissors and write your choice in the text box 
     <p> 
      <A HREF="javascript:processOrder();">Click here to begin</A> 
    </p> 
    ... 
    </BODY> 
</HTML>

，並在我的JS代碼：

var userChoice = prompt("Do you choose rock, paper or scissors?"); 
var computerChoice = Math.random(); 

if (computerChoice < 0.34) { 
    computerChoice = "rock"; 
} else if (computerChoice <= 0.67) { 
    computerChoice = "paper"; 
} else { 
    computerChoice = "scissors"; 
} 

var compare = function (choice1, choice2) { 
    if (choice1 === choice2) return "The result is a tie!"; 
    if (choice1 === "rock") { 
     if (choice2 === "scissors") return "rock wins"; 
     else return "paper wins"; 
    } 
    if (choice1 === "paper") { 
     if (choice2 === "rock") return "paper wins"; 
     else return "scissors wins"; 
    } 
    if (choice1 === "scissors") { 
     if (choice2 === "rock") return "rock wins"; 
     else return "scissors wins"; 
    } 
}; 

compare(userChoice, computerChoice);

我得到的提示選擇石頭紙或剪刀，但它不返回任何東西之後。我沒有在html中看到計算機的選擇，我不知道用什麼來顯示它。

來源

2013-07-18 Cherry

請注意，函數'compare'並不總是返回結果，這不是一件好事。如果用戶在被要求選擇時按下Cancel，'userChoice'將爲'null'，並且該函數不會返回值。 –

一個簡單的方法是把一個元素在HTML中id：

<div id="ret"></div>

然後你可以改變你的JavaScript的最後一行：

document.getElementById("ret").innerHTML=compare(userChoice,computerChoice);

，將放在結果裏面的那個div。

或者你可以只是做：

document.write(compare(userChoice,computerChoice));

這將寫，你把你的腳本標籤的結果。

來源

2013-07-18 14:40:25 ejk314

我在哪裏把這個在我的HTML文件？ – Cherry

你想要在身體中的任何地方。 – ejk314

您需要一個地方來顯示返回的結果。

JS你最後一行更改爲

alert(compare(userChoice,computerChoice));

來源

2013-07-18 14:45:18 seriousdk

尼斯崗位上工作了RPS鍛鍊。查看this JSFiddle，查看顯示用戶/計算機選擇和結果的實現。

你會注意到一些關鍵的變化。首先，你不應該一個href內鏈接到一個JavaScript函數：

<A HREF="javascript:processOrder();">Click here to begin</A>

看看this great SO answer用於多種方式可以提高在這一做法。在我的例子實現，我使用jQuery庫創建於Click here to begin提示單擊事件處理，像這樣：

$('#begin').click(function() {playRPS(); return false;});

其次，你會發現新的playRPS功能。這使用戶可以決定何時玩您的遊戲並多次播放。

上面列出的原代碼，當Javascript代碼被加載時，瀏覽器做了幾件事情馬上然後再也：

它啓動提示用戶輸入一個值。只要用戶輸入他們的選擇：
- 它爲computerChoice選取一個隨機值並將其轉換爲合適的rock/paper/scissors字符串值。
- 它執行compare（）函數。

，它甚至沒有等待用戶點擊您Click here to begin鏈接！看看功能如下：

var playRPS = function() { 
    var userChoice = prompt("Do you choose rock, paper or scissors?"); 
    var compChoice = computerChoice(); 
    var result = compare(userChoice,compChoice); 
    $('body').append('<p>You chose ' + userChoice + '</p>') 
       .append('<p>The computer chose ' + compChoice + '</p>') 
       .append('<p>' + result + '</p>'); 
};

它短而甜。當叫（請記住，它被稱爲隨時隨地的<a id="begin">鏈接被點擊，爲建立與jQuery），但它確實需要一個圓形RPS做的一切：

它要求他們要選擇什麼樣的用戶。
它運行computerChoice函數，生成一個新的隨機數並將該數字轉換爲字符串。
它運行在您的compare功能
它增加了用戶的選擇，電腦的選擇，只是<body>元素結束前由<p>標籤compare函數返回的結果。

現在有很多方法可以進一步改進 - 結果可以以更漂亮的方式顯示。應該檢查用戶的輸入以查看它是否是有效的答案（例如，如果我輸入「fire」到盒子或「Paper」中會發生什麼？），但這是一個很好的開始！

來源

2013-07-18 15:29:21 uptownnickbrown

如何在HTML頁面中顯示返回的值

回答

相關問題