Question

我试图复制像the page takes the user input like name and displays the name in a sentence on the next page

这样的内容

我编写了类似的代码，但它并不匹配我需要的代码。任何有关此的帮助或教程将不胜感激。

完整代码已添加。我希望能够在seconde提示符上输入我的名字，例如Greg键入一个形容词＆＃39;。但我发现很难。

＆＃13;

// List of prompts for the user
var prompts = [
	'Type your name',
	'Type an adjective',
	'Type a noun'
   ];

var answers=[];
// Keep track of current prompt we're on
var currentPrompt = 0;

// A function that will call the next prompt
var nextPrompt = function() {
  //if there's no answer in the form
  if (currentPrompt != 0){
    answers.push($('input').val());
  }
	// if there is a next prompt
	if (currentPrompt < prompts.length) {
		// put first prompt in all html elements with class 
		$('.prompt').html(prompts[currentPrompt] + '<br><input type="text">');
		// move the next prompt into variable currentPrompt 
		 
     currentPrompt = currentPrompt + 1;
	}

  


	//or else if we're at the end of the array
	else {
		// put a new message into the html.
		showFinal();
	
	}
}

//puts user answers into HTML
var showFinal = function() {
  $('.prompt').html('This is the story of <span class="fill">'+answers[0]+'</span> and the <span class="fill">'+answers[1]+'</span> <span class="fill">'+answers[2]+'</span>.');
  //and then hide the button
  	$('button').hide();
}
// run nextPrompt function when button is clicked
$('button').click(function() {
	nextPrompt();
});

// Show the first prompt as soon as js loads
nextPrompt();

＆＃13;

body{
  text-align: center;
  font-family: 'Fjalla One';
  font-size: 20px;
  background: #e6eaf0;
  }
  
button{
  margin: 40px;
  }
  
input {
  font-size: 24px;
  }
  
.fill {
  background: white;
  color: red;
  border-bottom: 2px black solid;
  font-family: 'Shadows Into Light';
  padding: 0 6px;
  margin: 4px;
  }

＆＃13;

<!DOCTYPE html>

<head>
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
</head>

<body>
<div class="prompt"></div>
<button>Next</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

Hm... Interesting.

I managed to get the code in the snippet below work as you specified. I added {name} to the second prompt. When that prompt is called, the user has already entered their name on the previous one => answers[0] is set and is the user's name. Therefore, I placed an if in nextPrompt() to check whether the current prompt is the second one. And if it is, then I am replacing {name} from prompts[1] with answers[0]. Quite stupid, but I hope you find it useful.

// List of prompts for the user
var prompts = [
	'Type your name',
	'{name}, type an adjective',
	'Type a noun'
   ];

var answers=[];
// Keep track of current prompt we're on
var currentPrompt = 0;

// A function that will call the next prompt
var nextPrompt = function() {
  //if there's no answer in the form
  if (currentPrompt != 0) {
    answers.push($('input').val());
  }    
	// if there is a next prompt
	if (currentPrompt < prompts.length) {
		// put first prompt in all html elements with class
    if (currentPrompt == 1) {
      prompts[1] = prompts[1].replace("{name}", answers[0]);
    }
		$('.prompt').html(prompts[currentPrompt] + '<br><input type="text">');
		// move the next prompt into variable currentPrompt 
		 
     currentPrompt = currentPrompt + 1;
	}

  


	//or else if we're at the end of the array
	else {
		// put a new message into the html.
		showFinal();
	
	}
}

//puts user answers into HTML
var showFinal = function() {
  $('.prompt').html('This is the story of <span class="fill">' + answers[0] + '</span> and the <span class="fill">' + answers[1] + '</span> <span class="fill">' + answers[2] + '</span>.');
  //and then hide the button
  	$('button').hide();
}
// run nextPrompt function when button is clicked
$('button').click(function() {
	nextPrompt();
});

// Show the first prompt as soon as js loads
nextPrompt();

body {
  text-align: center;
  font-family: 'Fjalla One';
  font-size: 20px;
  background: #e6eaf0;
}
  
button {
    margin: 40px;
}
  
input {
    font-size: 24px;
}
  
.fill {
    background: white;
    color: red;
    border-bottom: 2px black solid;
    font-family: 'Shadows Into Light';
    padding: 0 6px;
    margin: 4px;
}

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
</head>

<body>
    <div class="prompt"></div>
    <button>Next</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

Answer 2

如果仅仅是为了复制用户的名字，为什么不使用sessionStorage？

在提示页面上：

sessionStorage.setItem('name', name.value);
sessionStorage.setItem('adjective', adjective.value);
sessionStorage.setItem('noun', noun.value);

在显示数据的页面上：

$('.prompt').html('This is the story of <span class="fill">'+sessionStorage.getItem('name')+'</span>

Answer 3

在首页上使用POST方法表单。其默认行为是将表单数据作为URL搜索参数发送到第二页。您可以在第二页中查询搜索参数：

第1页：

<form action="secondpage.html" method="POST"> 
<input type="text" name="name" /> 
<input type="submit" value="Submit" /> 
</form>

第2页：

document.getElementById("id").innerHTML = window.location.search;

创建一个表单，该表单接受用户的输入，并在页面加载时将其添加到句子中

3 个答案: