I need to find the longest word in a sentence using JS

Question

I am having trouble getting my JS to return the longest word when I click on the button. I am not sure what in my JS code I am missing or have put incorrectly, but when I type in three words nothing is given back to me. I have pasted below both my JS and html codes.

HTML:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Longest Word</title>   
    <link rel="stylesheet" href="../css/easy.css">      
    <script src="p3-longest.js"></script>
</head>
<body>
    <header>
         <h1>Longest Word</h1>

    </header>
<body>
    <form action="demo_form.asp" id="demo_form">
  Phrase:
  <input type="text" id="input1" name="LongestWord" placeholder="Put Phrase Here">
  <br>
  <input type="button" id="btn1" value="Longest Word">
</form>
</body>
</html>

JS:

function longestWord(string) {
    var str = string.split(" ");
    var longest = 0;
    var word = null;
    for (var i = 0; i < str.length ; i++) {
        if (longest < str[i].length) {
            longest = str[i].length;
            word = str[i];
        }
    }
    return word;
}

function init() {
    alert('count words');
    var countTag = document.getElementById('btn1');
    countTag.onclick = longestWord(string);
}
window.onload = init;

Possible duplicate of http://stackoverflow.com/questions/12216758/find-out-the-longest-word-from-a-sentence-javascript — Stuart Wagner, Jun 11 '15 at 02:18
Your JS is correct. However, it is not in any way connected to your HTML. There is nothing that says "when this button is pressed, do this". — Amadan, Jun 11 '15 at 02:22
My code doesn't work. I saw that question as well and couldn't figure out how to correct it — , Jun 11 '15 at 02:23
@Amadan could that be fixed with a "on.click" command? Or how can that be added? Thank You — , Jun 11 '15 at 02:24
To hook up the button and your code, [please consult this previous question](https://stackoverflow.com/questions/19205687/calling-javascript-function-with-button-and-input-from-textbox). — Ken Y-N, Jun 11 '15 at 02:25
`$(...).on('click', ...)` is jQuery, and yes, this would be one way to do it. Plain JavaScript is with `document.getElementById(...).addEventListener('click', ...)`, or `.onclick = ...`. Another way is demonstrated in the link by Ken Y-N, but that one (putting JavaScript directly into `onclick="..."` attribute is discouraged by advanced users. — Amadan, Jun 11 '15 at 02:28
I tried that, and when clicked nothing happens. It says my string is undefined — , Jun 11 '15 at 02:32

score 0 · Answer 1 · answered Jun 11 '15 at 02:38

0

Add this to your button:

 onClick="alert(longestWord(document.getElementById('input1').value))"

It will take the value of input1 and send it to your longestWord-function. Then put up an alert-box with the return value from your function.

answered Jun 11 '15 at 02:38

Geir Anders

1
2

i tried that and it didn't work. Here is the JSFiddle: https://jsfiddle.net/1emm5odt/ , maybe that can help? – Jun 11 '15 at 02:43
The onClick goes into the button like so: – Geir Anders Jun 11 '15 at 03:12

score 0 · Accepted Answer · answered Jun 11 '15 at 02:44

try this:

Phrase:
<input type="text" id="input1" name="LongestWord" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" value="get Longest Word">
<br/>
Longest Word: <span id='sp1'></span>
<script>                   
    var btn = document.getElementById("btn1");
    var in1 = document.getElementById("input1");
    var sp1 = document.getElementById("sp1");
    btn.onclick = function(){
        var vals = in1.value.split(' ');
        var val = vals[0];
        vals.forEach(function(v){ if(v.length>val.length) val = v;});
        sp1.textContent = val;
    }
</script>

Fiddle Demo

score 0 · Answer 3 · answered Jun 11 '15 at 02:55

I don't see anything particularly wrong with your code ... except for the fact that "I don't see any code here that will ever 'give anything back to you!'" :-)

Presumably, "onload", the init() function dutifully runs ... and setting countTag.onclick to whatever integer value longestWord() might return when given the undefined value of the non-declared non-variable length. (Which is of no good use at all to onclick, which expects a function, not an integer...)

None of which, even if it did work (which it doesn't ...), ever asks the digital computer to, by any means at all, "give anything back to you!"

I need to find the longest word in a sentence using JS

3 Answers3

Fiddle Demo