Javascript Textbox to Variable

Question

I have been working on a little project for a day or two. The code is the following.

<!DOCTYPE html>
<html>
<head>
<script>

function search() 
{
document.getElementById("text1").value


window.location.hash = "myVariable";
}
</script>

</head>
</body>
<form name="myform">
<input type="text" name="text1" value="">
<input type="button" value="Search" onclick="search()">
</form>


<div style="height: 4000px"></div>
<span id='yeah'>I have successfully jumped.</span>
<div style="height: 4000px"></div>

</body>
</html>

Now you may be wondering what am I trying to accomplish with this code? Well, I want to be to enter a value in the text box and then it will jump me to the section (the section is the value in the text box). It is sort of like a search engine, but it is not.

For example the section is yeah. When a user enters yeah in the text box it is supposed to jump them to the yeah section. Instead nothing happens. And despite looking all over the Internet I have not found an answer that satisfies my needs, so I would kindly ask that you please explain to me what my problem is and possibly give me a solution to my problem.

I am using the Mozilla Firefox web browser (if that information is necessary).

Dalorzo · Accepted Answer · 2014-07-06 22:58:34Z

1

Try this:

function search() 
{
  var elID= document.getElementById("text1").value;
  var el = document.getElementById(elID);

  el.scrollIntoView(true);
}

The Element.scrollIntoView() method scrolls the element into view

Online Demo

edited Jul 6, 2014 at 22:58

answered Jul 6, 2014 at 22:52

Dalorzo

20k7 gold badges57 silver badges102 bronze badges

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

Comments

bryce · Accepted Answer · 2014-07-06 23:06:09Z

0

Dalorzo's should work, but jQuery could be the better option than raw javascript if you plan to add more than just this function.

Here's a fiddle of what you're trying to do.

$("#button1").click(function() {
    var t = $("#text1").val();

    alert(t);

    $('html, body').animate({
        scrollTop: $("#"+t).offset().top
    }, 2000);
});

edited Jul 6, 2014 at 23:06

answered Jul 6, 2014 at 22:59

bryce

3,0531 gold badge17 silver badges19 bronze badges

3 Comments

Nathan Over a year ago

I'd suggest the other way around -- for simple tasks like this raw JavaScript is a much preferred solution and will induce a lower overhead.

bryce Over a year ago

True, it's a lot heavier. If this is the only javascript needed then yes, raw is logical. I'm making the assumption that this function will be expanded upon.

zDoude Over a year ago

That is all I want to do with that function. However, jQuery seems interesting and I think I will read more into it. So I guess you did solve my problem, in a way.

Collectives™ on Stack Overflow

Javascript Textbox to Variable

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related