Javascript 要在用户单击“提交”按钮后将h1更改为输入框中的文本用户输入吗_Javascript_Jquery_Html

Javascript 要在用户单击“提交”按钮后将h1更改为输入框中的文本用户输入吗

javascript jquery html

Javascript 要在用户单击“提交”按钮后将h1更改为输入框中的文本用户输入吗,javascript,jquery,html,Javascript,Jquery,Html,我是一个完全的新手，我不知道我的代码出了什么问题。如果用户将狗输入到输入框中，我希望“Hello world”改为“我爱狗”；如果用户不将狗输入到输入框中，我希望“Hello world”改为“Why not Dogs？！” 当用户输入文本并单击submit时，我运行if语句以查看它是否为Dogs。然后我想用不同的h1替换h1 <!DOCTYPE html> <html> <head> <link rel='stylesheet' hre

我是一个完全的新手，我不知道我的代码出了什么问题。如果用户将狗输入到输入框中，我希望“Hello world”改为“我爱狗”；如果用户不将狗输入到输入框中，我希望“Hello world”改为“Why not Dogs？！”

当用户输入文本并单击submit时，我运行if语句以查看它是否为Dogs。然后我想用不同的h1替换h1

<!DOCTYPE html>
<html>
<head>
        <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>
<h1>Hello World</h1>
<input id="inputBox"><id/>
<button onclick="changeInputBoxText()">Submit</button>
<script>
    function changeInputBoxText()
    {
        if (document.getElementById("inputBox")==="Dogs")
        {
            $("h1").replaceWith("<h1>I love Dogs</h1>");
        }
        else
        {
            $("h1").replaceWith("<h1>Why not dogs?!</h1>");
        };
    };
</script>

</body>
</html>


你好，世界
提交
函数changeInputBoxText（）
{
if（document.getElementById（“inputBox”）=“Dogs”）
{
$（“h1”）。替换为（“我爱狗”）；
}
其他的
{
$（“h1”）。替换为（“为什么不是狗？！”）；
};
};

试试：

你为什么要把jquery和javascript混为一谈呢。？只需使用jquery从文本框中获取值，使用

id选择器

和

.val（）

即可

试试看

或者使用纯Jquery

$(":button").click(function(){
  $("h1").text(($("#inputBox").val() === "Dogs")?"I love Dogs":"Why not dogs?!");
});

如果希望通过jQuery完成此操作：

<script>
    $(function(){
    $('button').click(function()
    {
        if ($('#inputBox").val()==="Dogs")
        {
            $("h1").html("I love Dogs");
        }
        else
        {
            $("h1").html("Why not dogs?!");
        };
    };
    });
</script>


$（函数（）{
$（“按钮”）。单击（函数（）
{
如果（$（'#输入框“）.val（）=“狗”）
{
$（“h1”）.html（“我爱狗”）；
}
其他的
{
$（“h1”）.html（“为什么不是狗？！”）；
};
};
});

检查您遗漏的这条语句。使用您的代码，值应如下所示：

function changeInputBoxText()
    {
        if ($("#inputBox").val().trim().indexOf("Dogs")>-1)
        {
            $("h1").html("I love Dogs");
        }
        else
        {
            $("h1").html("Why not dogs?!");
        };
    };

请注意，这将检查用户是否在输入中的某个位置输入了狗，这样他就可以输入“我想要狗”，并且它仍然会计数。

测试您的条件id。值=='test'

if (document.getElementById("inputBox").value==="Dogs")

有些东西..甚至你也可以使用。我想我已经找到了你的解决方案不起作用的原因。我用的是codecademy codbit编辑器，但很多其他人在识别jquery时遇到了麻烦。从现在起我将尝试使用fiddle编辑器！我添加了你的建议并替换了其他代码，但是当我键入任何内容时点击提交框，仍然没有任何事情发生。这行代码真的有效吗？$（“h1”）.text（“我爱狗”）我想通过隔离它来看看它是否有效，但我不确定从我刚刚放入$（“h1”）.text（“我爱狗”）时起它是如何工作的在我的脚本中，它不会改变h1。@user3764222是否包含了jquery库..？控制台上是否有任何错误..？我认为这应该被接受为答案。它使用了jquery中所有的新语法。是否区分大小写？是的，演示非常有效！但第一个建议仍然不起作用。（我使用codacedemy进行测试，因为它更简单）。我想我已经解决了我的问题！我使用的codecademy代码位编辑器似乎不支持jquery，其他人在让jquery正常工作方面遇到了问题：-/

 if (document.getElementById("inputBox").value==="Dogs")

function changeInputBoxText()
    {
        if ($("#inputBox").val().trim().indexOf("Dogs")>-1)
        {
            $("h1").html("I love Dogs");
        }
        else
        {
            $("h1").html("Why not dogs?!");
        };
    };

if (document.getElementById("inputBox").value==="Dogs")