CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Maksim Tonyushkin
Maksim Tonyushkin

Reputation: 95

I can't get HTML Text box into Jquery

I am trying to make the jquery store my name in a variable then to show it where the h3 is. I also want the button to fade when hovered over. 

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='style.css'/>
<link rel='stylesheet' href='todo.css'/>
<script type='text/javascript' src='todo.js'></script>
</head>
<body>
<div>
<form><br>
    <h3 id="text">What Is Your Name?</h3><br><br>
    <input id="input" class="text" type="text" name="name" value="">
    <button id="next" class="submit" type="button">Next</button> 
</form>
</div>
</body>
</html>

the Jquery is also

$(document).ready(function(){
$(".submit").mouseenter(function(){
   $(".submit").fadeTo('slow', 0.15);
});
$(".submit").click(function(){
  var input = $('#input').val();
  $('h3').text('Hello, ' + input + ". Let's get started.");
});
});

Upvotes: 0

Views: 65

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074078

Looks like you've forgotten to include jQuery, unless it's in your todo.js file. If you do that, it works just fine.

Example - Live Copy

<!DOCTYPE html>
<html>
<head>
  <!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel='stylesheet' href='style.css'/>
<link rel='stylesheet' href='todo.css'/>
  <!-- This script stands in for your todo.js -->
  <script>
    $(document).ready(function(){
      $(".submit").mouseenter(function(){
        $(".submit").fadeTo('slow', 0.15);
      });
      $(".submit").click(function(){
        var input = $('#input').val();
        $('h3').text('Hello, ' + input + ". Let's get started.");
      });
    });

  </script>
</head>
<body>
<div>
<form><br>
    <h3 id="text">What Is Your Name?</h3><br><br>
    <input id="input" class="text" type="text" name="name" value="">
    <button id="next" class="submit" type="button">Next</button> 
</form>
</div>
</body>
</html>

Upvotes: 3

Related Questions