JavaScript 更改 html <p> 标签值答案

【问题标题】：Change an HTML <p> tag value with JavaScriptJavaScript 更改 html <p> 标签值
【发布时间】：2018-01-21 12:29:58
【问题描述】：

我有一个 HTML 表单，允许用户输入派系的名称并通过按钮提交：

<form method="get">
    </br><button type="submit" onclick="createFaction()">create faction</button>
    <input placeholder="name" id="factionName" name="factionName"></input>
</form>

之所以立即获取，纯粹是为了测试。然后我有一个js函数可以改变这个的名字

<p id="test1"></p>

无论用户输入的是什么。 JS代码是

function createFaction() {
        var name = document.getElementById('factionName'),
        factionName = input.value;

        document.getElementById('test1').innerHTML = name;
    }

但它不起作用，我不知道为什么

【问题讨论】：

您的按钮是一个“提交”按钮，这意味着它会导致表单被提交并且页面被重新加载并响应。改为type=button。
这也不起作用
还有，功能不对；您将<input> 元素提取到变量“name”中，然后在该赋值语句中引用“input.name”；这会导致错误。您需要在调试时保持浏览器开发者控制台打开。
我该如何修复这个功能？
啊我已经修好了

标签： javascript jquery html web

【解决方案1】：

onclick 将在按钮类型 = 提交时触发，函数将如下所示：" function createFaction() { var name = document.getElementById('factionName').value; document.getElementById('test1').innerHTML = name; }

【讨论】：

【解决方案2】：

首先更改type='button' 而不是提交，type="submit" 将提交页面并且您不会看到更改完成，请在此处更改

 <button type="button" onclick="createFaction()">create faction</button>

然后在js中更改name.value从name对象中获取值

factionName = name.value;

function createFaction() {
        var name = document.getElementById('factionName'),
        factionName = name.value;

        document.getElementById('test1').innerHTML = factionName;
    }

<form method="get">
    </br><button type="button" onclick="createFaction()">create faction</button>
    <input placeholder="name" id="factionName" name="factionName">
    </form>
<p id="test1"></p>

另一种方法是，

function createFaction(faction) {
  document.getElementById('test1').innerHTML = faction;
}

<input onchange="createFaction(this.value)" onkeyup="createFaction(this.value)" placeholder="type somthing ..." id="factionName" name="factionName">
<p id="test1"></p>

【讨论】：

【解决方案3】：

你甚至不需要一个表格，而且功能可以变得更简单 - 这样做：

function createFaction() {
  var name = document.getElementById('factionName').value;
  document.getElementById('test1').innerHTML = name;
}

<button onclick="createFaction()">create faction</button>
<input placeholder="name" id="factionName" name="factionName"></input>

<p id="test1"></p>

【讨论】：

如果只有 2 行 JS 可以完成相同的工作，那么 jQuery 的意义何在？是浏览器兼容性问题吗？应该是有原因的。我错过了什么？
@Axalix 这个问题包含了jQuery标签，所以我一开始就包含了它，只是忘记了再次取出它。我现在删除了它 - 也可以...
我明白了。我认为标签与问题无关，因为没有参考。

【解决方案4】：

您不需要将其包装到 form 中，因为您没有尝试将数据发送到服务器，因此您可以跳过它。我也会为此使用 jQuery：

<button id="factionBtn">create faction</button>
<input placeholder="name" id="factionName" name="factionName">
<p id="test1"></p>

还有：

$(document).ready(function createFaction() {
    var $paragraph = $('#test1');
  var $factionName = $('#factionName');

  $('#factionBtn').click(function(e) {
      console.log($factionName.val());
    $paragraph.text($factionName.val());
  });
});

【讨论】：