need to run <input> through a function when I click a button (using bootstrap)

Question

Basically, I'm using bootstrap as my CSS, but I'm running into a problem. When I click the button (id="myQuestionButton"), I want it to take the input from the input box (id="myInput") and run it through function checkQuestionWords().

Here's the block of code pertaining to the input and button:

<div class="input-append span9 offset3">
  <form>
    <input class="span4" type="text" id="myInput" 
    placeholder="Enter your question."></input>
    <button class="btn" type="submit" id="myQuestionButton">
    Let's check second.</button>
  </form>
</div>

Here's where it will print the preliminary results (for now just in a <div> </div>):

<div id="results"></div>

And here's my function so far:

function checkQuestionWords(){
  var theInput = document.getByElementId("myInput");
  var theQuestion = theInput.trim();
  var questionWords = ["who", "what", "where", "when", "why", "how"];
  var isItGood = false;

for (var i=0, i<7; i++){
  var holder1 = questionWords[i];
  var holder2 = holder1.length;
    if (theQuestion.substr(0,holder2) == questionWords[i]){
      isItGood = true;
      break;}
    else{
      isItGood = false;}}

if (isItGood == false){
  document.getByElementId("results") = "Please enter a question...";}
  //the above just reminds them to begin with a question word; see questionWords
else{
  document.getByElementId("results") = "all is good";}

}

I tried doing a whole onclick=checkQuestionWords()" inside of the <button ...></button> but that didn't work for some reason.

Pls show the exception

Jericho
– Jericho

2013-06-24 03:16:34 +00:00
Commented Jun 24, 2013 at 3:16 — Jericho
– Jericho, Commented Jun 24, 2013 at 3:16
one little thing. no closing tag for input box.

skparwal
– skparwal

2013-06-24 03:21:24 +00:00
Commented Jun 24, 2013 at 3:21 — skparwal
– skparwal, Commented Jun 24, 2013 at 3:21

Artyom Neustroev · Accepted Answer · 2013-06-24 03:43:04Z

1

Is your problem just that you are using var theInput = document.getByElementId("myInput"); ?

This will give you the input control with the id of myInput but not the text inside it. You want something more like

var theInput = document.getByElementId("myInput").value;

This will give you the actual text which you can then assign to theQuestion using

var theQuestion = theInput.trim();

edited Jun 24, 2013 at 3:43

Artyom Neustroev

8,7355 gold badges36 silver badges59 bronze badges

answered Jun 24, 2013 at 3:24

goosyman

112 bronze badges

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

Comments

skparwal · Accepted Answer · 2013-06-24 03:33:59Z

0

There are lots of problems in the above code:

Problems are:

getByElementId should be getElementById
document.getByElementId("myInput") should be document.getElementById("myInput").value;
document.getByElementId("results") should be document.getElementById("results").innerHTML

See the working code below:

<script>
function checkQuestionWords() {
    var theInput = document.getElementById("myInput").value;
    var theQuestion = theInput;//.trim();
    var questionWords = ["who", "what", "where", "when", "why", "how"];
    var isItGood = false;


    for (var i=0; i<7; i++){
      var holder1 = questionWords[i];
      var holder2 = holder1.length;
        if (theQuestion.substr(0,holder2) == questionWords[i]){
          isItGood = true;
          break;}
        else{
          isItGood = false;}}

    if (isItGood == false){
      document.getElementById("results").innerHTML = "Please enter a question...";
    }
      //the above just reminds them to begin with a question word; see questionWords
    else{
      document.getElementById("results").innerHTML = "all is good";
    }

    return false;

}
</script>
<div class="input-append span9 offset3">

    <input class="span4" type="text" id="myInput" 
    placeholder="Enter your question."></input>
    <button class="btn" type="submit" id="myQuestionButton" onclick="checkQuestionWords();">
Let's check second.</button>

</div>
<div id="results"></div>

answered Jun 24, 2013 at 3:33

skparwal

1,0746 silver badges15 bronze badges

4 Comments

royhowie Over a year ago

Okay. This seems to work when I just put it on a blank page (with the appropriate links to the CSS/html header/body/etc.), but not when I have it with the rest of my code. I literally tried copying/pasting it in (and removing the old code), but to no avail.

skparwal Over a year ago

Can you edit your question with new changes. So that I can review and check it.

royhowie Over a year ago

Nvm, I got it to work. The problem seemed to be that the question would be upper case ("How") while the array was full of lowercase question words ("how"). I just did theQuestion = theQuestion.toLowerCase(); and everything worked out.

royhowie Over a year ago

The reason it worked on another page was because I had been typing the question all in lowercase; I was getting frustrated so I was just typing as fast as I could, thereby neglecting the use of shift.

Artyom Neustroev · Accepted Answer · 2013-06-24 03:42:22Z

0

Try simple calling like this:

var btn = document.getElementById["myQuestionButton"];
btn.onClick = checkQuestionWords;

edited Jun 24, 2013 at 3:42

Artyom Neustroev

8,7355 gold badges36 silver badges59 bronze badges

answered Jun 24, 2013 at 3:30

EduardoSaverin

5454 silver badges19 bronze badges

1 Comment

Artyom Neustroev Over a year ago

getElementById is a function, not an object.

Collectives™ on Stack Overflow

need to run <input> through a function when I click a button (using bootstrap)

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related