如何将输入提交的文本链接到 javascript 代码答案

【问题标题】：How do i link input submitted text to javascript code如何将输入提交的文本链接到 javascript 代码
【发布时间】：2020-11-10 06:33:18
【问题描述】：

我的html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Huffman Coding</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
    <span>Huffman <span>Coding</span></span>
    <br><br><br>
    <div id="temp">
        Enter input string here <br><br><br>
        <form action="" id="input">
            <input id="input-string" name="input_string" type="search">
            <br>
            <button type="submit" onclick="calcHash()">Submit</button>
        </form>
    </div>

    <p id="demo"></p>
</body>

</html>

我的 Js 代码：

函数 calcHash() {

var input = document.getElementById("input");

var text = "";
for (let i = 0; i < input.length; i++) {
    text += input.element[i].value + "<br>";
}

document.getElementsByTagName("demo").innerHTML = text;

}

现在 js 文件正在返回并将数据显示到 url 而不是页面我想将输入标签中的文本打印到 js 文件中并将其打印回<p id="demo"></p>

这也是我的 CSS 代码

body{
    display: flex; 
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: black;
}
body span{
    font-size: 4rem;
    margin-top: 10rem;
    color: rgb(255, 123, 123);
}
body span span{
    color: rgb(220, 248, 96);
}
div{
    display: flex;
    align-items: center;
    flex-direction: column;
    color: rgb(255, 255, 255);
}

form{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#input-string{
    background-color: white;
    opacity: 1;
    width: 20rem;
    height: 3rem;
    font-size: large;
}

#submit{
    width: 4rem;
    height: 1.2rem;
}

#output{
    color: aliceblue;
}

【问题讨论】：

你想在<p id="demo"></p>中显示text的值吗？

标签： javascript html

【解决方案1】：

代码错误：document.getElementsByTagName("demo").innerHTML = text; (document.getElementsByTagName)方法返回指定标签名的对象集合

代码正确：document.getElementById("demo").innerHTML = text;

【讨论】：

【解决方案2】：

如果您尝试迭代表单元素，请使用此方法https://stackoverflow.com/a/19978872/11374441

“提交”类型的按钮将提交表单中的所有信息，这就是您在 URL 中看到它的原因。但是，如果您的 onclick 函数（此处为 calcHash）返回 false，它将不会提交表单。因此，如果您确实想查看 URL 中的信息（即不提交表单），请确保您的调用函数返回 false。

【讨论】：