从JavaScript函数所做的HTML更改不起作用

我正在尝试更新id为

“prompter”

的

h1

标题。该值通过

id=“userText”

从输入接收。我可以很好地提醒这个值

但是，当我尝试在jquery中使用.html方法时，在恢复到原始标题之前，更改仅出现了一秒钟。你知道这是怎么回事吗

My.js文件：

var stepper = function() {
    alert (str);

    //why doesn't this line say displayed
    $("#prompter h1").html(str);
}

$(".go").click (function() {
    str = $("#userText").val();
    stepper();
});

编辑（简化——但H1仍然只是暂时更改）

从my.js：

$(".go").click (function() {
    var str = $("#userText").val();
    $("#prompter").html(str);
});

从我的HTML：

<form class="col s12 ">
    <div class="row">
       <input placeholder="Paste text here" id="userText" type="text" class="validate"></input>
       <label for="userText">What you want to read</label>
    </div>
    <button type="submit" class="waves-effect waves-light btn go">Go</button>
</form>

你想读什么
去

---

您可以直接使用

id

$("#prompter").html('new text');

更新：

按钮

在表单中具有类型

submit

，则会发回

将按钮类型从

type=“submit”

更改为

type=“button”

，这样它就不会发回您的文本恢复为原始文本的原因

<button type="button" class="btn go">Go</button>

Go

您的代码完全不正确。请看下面

var stepper = function(str) { //access parameter
alert (str);
//why doesn't this line say displayed
//$("#prompter h1").html(str);    //this is incorrect    
$("#prompter").text(str); or $("#prompter").html(str);      //this is correct if your h1 id is prompter

}

$(".go").click (function() {
str = $("#userText").val();   //you are going to call stepper() with var `str`
stepper(str);                 //pass var parameter in function
});

---

请提供html alsoThanks。这就是我最初尝试的。当我把它放在函数外时，它可以正常工作，但是如果我想让它对单击做出响应，H1会立即恢复到原来的状态。@JustinEder，我试过你的代码，它可以正常工作，也许你有另一个函数可以触发你的右边的值的恢复！它起作用了。背景中还发生了其他一些事情。我在这里上传了我的完整代码：我不确定这个错误是什么意思：{“错误”：“请使用POST请求”}我想我需要将这个添加到我的表单中：谢谢你的帮助。这里是现场直播：谢谢。就这样。工作起来很有魅力！