How do i link input submitted text to javascript code

Question

My html code:

<!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>

My Js code:

function 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;

}

Right now the js file is returning and displaying data into the url instead of the page I want to print text from input tag into js file and print it back into <p id="demo"></p>

here's my CSS code also

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;
}

Do you want to display the value of text in <p id="demo"></p>? — Praneet Dixit
– Praneet Dixit, Commented Nov 10, 2020 at 6:44

小周未来工程师 · Accepted Answer · 2020-11-10 06:44:45Z

0

code error: document.getElementsByTagName("demo").innerHTML = text; (document.getElementsByTagName)Method returns a collection of objects with the specified tag name

code correct: document.getElementById("demo").innerHTML = text;

answered Nov 10, 2020 at 6:44

小周未来工程师

1

Sign up to request clarification or add additional context in comments.

Comments

Dharman · Accepted Answer · 2020-11-10 07:03:35Z

0

If you are trying to iterate form elements, use this approach https://stackoverflow.com/a/19978872/11374441

"submit" type button will submit all information in the form which is the reason you see it in the URL. However if your onclick function(calcHash here) returns false, it will not submit the form. So, if you do want to see the info in the URL(i.e. not to submit the form) just make sure your calling function returns false.

edited Nov 10, 2020 at 7:03

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Nov 10, 2020 at 6:58

Vivek Pandey

34 bronze badges

Collectives™ on Stack Overflow

How do i link input submitted text to javascript code

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related