Just a quick javascript question.

[IndigoClaudia]

How would let users input something, and based on their input, it displays certain text.

E.G if the user inputs "Fish" the word "bloop" displays, or if someone inputs "234jdfg" you get, "sorry, i didn't recognize this." or something. Does anybody know how i could do that?

 

[Butterfree]

How do you want the user to input it? Do you just want a single-line text input field, or something else? Should the message appear when the user presses a button, or should it appear as they type?

 

[IndigoClaudia]

It's a single line text input field, and then you press submit, and then it shows the answer.

 

[kyeugh]

what i would probably do is have a text input, a button, and an uneditable text field whose value is changed based on the text input when the button is pressed. that might look something like this:

<input type="text" />
<button type="button" onclick="getResult()">Submit</button>
<textarea readonly></textarea>
<script>
    function getResult() {
        var inputText = document.querySelector("input");
        var outputArea = document.querySelector("textarea");
        if (inputText.value == "Fish")
            outputArea.value = "bloop";
        else if (inputText.value == "Cat")
            outputArea.value = "miau";
        else
            outputArea.value = "Sorry, I didn't recognize that.";
    }
</script>

click here for a demo. this is just how i'd do it, others might have other ideas. let me know if you have any questions or if anything is confusing.

 

[Butterfree]

Something like this:

<input type="text" id="input"> <button type="button" id="button">Submit</button>
<p id="result"></p>

<script>
document.getElementById("button").onclick = function() {
    var value = document.getElementById("input").value.toLowerCase();
    var result;
    if (value === "fish") {
        result = "bloop";
    } else if (value === "butterfree") {
        result = "free";
    } else {
        result = "Sorry, I don't recognize this";
    }
    document.getElementById("result").innerHTML = result;
};
</script>

That's going to be case-insensitive, since that's probably what you want for something like this; if that's not what you want, you'll want to remove the ".toLowerCase()".