采用 HTML 形式的 <input> 值并使用它修改带有 Javascript 的 <p> 标签

Question

我是 Javascript 的新手，我正在尝试创建一个简单的 madlib 应用程序，用户可以在其中通过 HTML 页面输入单词，并在用户单击 "submit" 按钮。我在显示用户输入的单词时遇到问题。我知道我很接近，但我终究无法弄清楚我错过了什么。

这是我正在使用的HTML：

 <form>
      <label>Word</label><input id="word"></input>
      <input type="submit" value="submit" id="submitButton"></input>
 </form>

 <p id="story"> A {userWord goes here} is now part of the story </p>

和 Javascript:

 var word = document.getElementById('word').innerHTML,
     originalStory = document.getElementById('story'),
     button = document.getElementById("submitButton");

 button.onclick = function(){
      replaceStory(word);
 };

 var replaceStory = function(userWord) {
        var story = ("A " + userWord + " is now part of the story");

        return originalStory.innerHTML = story;
 };

这是一个 JSFiddle：https://jsfiddle.net/5c4j2opc/

Answer 1

您遇到了一些小问题。提交按钮的输入类型应该是 button 而不是 submit。提交执行 post 请求并使用收到的数据刷新页面。

最初你有： var word = document.getElementById('word').innerHTML 这将得到初始的 innerHTML，它什么也不是。每次单击按钮时，您都必须获取 word 中的内部文本才能获取文本框中的最新文本。

最后，对于输入节点，您应该 .value 而不是 .innerHTML 来获取内部文本

html:

<form>
    <label>Word</label><input id="word"></input>
    <input type="button" value="submit" id="submitButton"></input>
</form>

<p id="story"> A {userWord goes here} is now part of the story </p>

javascript:

var word = document.getElementById('word'),
    originalStory = document.getElementById('story'),
    button = document.getElementById("submitButton");

button.onclick = function(){
    replaceStory(word.value);
};

var replaceStory = function(userWord) {
    var story = ("A " + userWord + " is now part of the story");

    return originalStory.innerHTML = story;
};

Answer 2

我制作了一个新的 JSFiddle：https://jsfiddle.net/5c4j2opc/3/ 有效。

我将 type="submit" 更改为 type="button" 以在单击按钮时停止页面刷新，并将单词变量移至 replaceStory 函数，这样它就不会被调用一次在脚本的开头！希望这有帮助。

Answer 3

你必须改变两件事。

首先是您在输入元素中使用 innerHTML，当您想要访问输入元素时，您需要获取值而不是 innerHTML，输入没有这个属性。

第二个是您需要在 onclick event 上传递事件，因为如果您不这样做，您将无法取消提交操作，然后页面将自动提交并重新加载内容。然后，在您通过 event 后，您必须应用 event.preventDefault，这将停止对该按钮的提交。避免此问题的其他选项可能是用 <button> 标签或 <input type="button"> 替换提交按钮，因为它们都不会触发提交操作。

你可以看到一个工作示例https://jsfiddle.net/5c4j2opc/9/

html -> 和你一样

javascript

var word = document.getElementById('word'),
    originalStory = document.getElementById('story'),
    button = document.getElementById("submitButton");

button.onclick = function(e){
    replaceStory(word.value);
    e.preventDefault();
};

var replaceStory = function(userWord) {
    var story = ("A " + userWord + " is now part of the story");

    return originalStory.innerHTML = story;
};

Answer 4

您在脚本的开头初始化 word。另外，输入的值不是innerHTML，那段时间，值是空的。

只要 return 值未明确设置为 false，表单就会重新加载页面并覆盖任何结果。

更改您的代码：

var originalStory = document.getElementById('story'),
button = document.getElementById("submitButton");

button.onclick = function(){
    var word = document.getElementById('word').value;
    replaceStory(word);
    return false;
};

var replaceStory = function(userWord) {
     var story = ("A " + userWord + " is now part of the story");

     originalStory.innerHTML = story;
 };

updated fiddle

Answer 5

我建议你先了解Javascript，然后再专注于学习Jquery，因为它更容易和得心应手。顺便说一下，如果你想按你说的做：

您不应该使用表单标签，因为您不想向服务器端发送内容，您也可以使用 div 标签代替表单标签。

<div>
    <label>Word</label>
    <input id="word" type="text"></input>
    <button id="submitButton">Submit</button>
</div>
    <span>A </span><span id="text">{here}</span><span> is now part of the story</span>

Jquery

$('#submitButton').click(function(){
    txt = $('#word').val()
    $('#text').text(txt);
});

不要忘记导入 Jquery 包。

https://jsfiddle.net/softiran/gt8rr5pe/

Answer 6

您还可以允许用户直接更改您的故事。我知道这可能不会使用输入标签，但它对我很有用。

<div id="story">Once upon a time there was a man named
<p id="added" contenteditable="true" title="Click to change">
Bill</p>. He liked to eat tacos.</div>

我在将故事主角的名字更改为用户选择的名字并允许他们下载故事的代码中使用了它。希望这可以帮助！用户所要做的就是单击名称 "Bill"，然后他们就可以将名称更改为他们想要的任何名称。

采用 HTML 形式的 <input> 值并使用它修改带有 Javascript 的 <p> 标签

Taking a HTML form <input> value and using it to modify a <p> tag with Javascript

html

javascript

forms

input

Jquery