Ein einfaches JavaScript Mad Lib-Spiel

Question

Ich habe ein einfaches Mad Lib-Programm in JavaScript geschrieben. Alles funktioniert bis auf eine Sache. Mein Name zeigt nicht definiert an. Der Code ist unten. Bitte helfen Sie mir, den Fehler zu finden.

Und hier ist codepen Link.

HTML:

Name: <input type="text" id="name"> 
Favourite Color: <input type="text" name="color" id="color"> 
Fovourite Place: <input type="text" name="place" id="place"> 
Number: <input type="number" name="number" id="number"> 
<button id="launch">Launch</button> 
<div id="story"></div> 

Js:

var name = document.querySelector("#name"); 
var color = document.querySelector("#color"); 
var place = document.querySelector("#place"); 
var number = document.querySelector("#number"); 
var story = document.querySelector("#story") 
var launch = document.querySelector("#launch"); 
launch.addEventListener("click", writeStory, false); 

function writeStory(){ 
var launchedStory = ""; 
launchedStory += "<p>Welcome, " + name.value + ". "; 
launchedStory += "Only silly people choose " + color.value + " as their favorite color.</p>"; 
launchedStory += "<p>Is " + place.value + " your current place or your birth place.</p>"; 
launchedStory += "<p>By the way, " + number.value + " is your serial number.</p>"; 

story.innerHTML = launchedStory; 
} 

Answer 1

Schreiben Sie Ihren Code in Skript-Tag in Windows-Ereignis-Onload-Funktion. Der Name der globalen Variablen steht in Konflikt mit der Namenseigenschaft des Fensterobjekts. Sie können den Namen der globalen Variablen auch von einem Namen in einen anderen Namen ändern.

Sol 1.

var nameElement = document.querySelector("#name"); 

Dann können Sie seinen Wert lesen nameElement.value

verwenden, aber es ist gut, nicht den globalen Namensraum verschmutzen. Schreiben Sie Ihren Code in den Funktionsumfang.

Sol 2.

<script type="text/javascript"> 
    window.onload = function() { 
    // your code here 
    } 
</script> 

Hier Geige ist https://jsfiddle.net/mrk_m/L1an24ut/1/

Answer 2

Sie müssen sonst die Variablennamen aus name zu etwas ändern, weil der Dolmetscher als window.name stattdessen zu lösen.

Answer 3

Wenn Sie madlibs tun, dann tun:

puts "give me a transportation" 
transportation = gets.chomp 

Dann

puts "then we got in the {transportation} and went to Wendy's"