Click on the button without any reaction

Question

Click on the button without any reaction

I'm having trouble with the button.

When I click on the button with ng-click="goSearchTitle()", nothing happens.

Any idea why it's not working?

    <body ng-app="myapp">

    <div ng-contoller="searchbyTitle">
        <h3>Searching by Title</h3>
        <div>
            <input type="text" id="searchTitle" placeholder="Enter a title" ng-model="searchTitle"/>
            <button type="button" id="goSearchTitle" ng-click="goSearchTitle()">Search</button>
        </div>

    </div>

    <script>
        angular.module("myapp", []).controller("searchbyTitle", function($scope, $http) {
            $scope.goSearchTitle = function(){
                alert($scope.searchTitle);
            }
        });
    </script>
    </body>

javascript angularjs

Answer 1

Answer №1

The name of your application is incorrect.

<body ng-app="myapp">

If not corrected, Angular will generate an injector module error. It is advisable to always check the console for errors in order to gain a better understanding.

Answer 2

The name of your application is incorrect.

<body ng-app="myapp">

If not corrected, Angular will generate an injector module error. It is advisable to always check the console for errors in order to gain a better understanding.

Answer 3

Answer №2

You made a typo at ng-contoller, it should be ng-controller

var myApp = angular.module("myapp", []);
myApp.controller("searchbyTitle", function($scope, $http) {
  $scope.goSearchTitle = function() {
    alert($scope.searchTitle);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myapp">
  <div ng-controller="searchbyTitle">
    <h3>Search by Title</h3>
    <div>
      <input type="text" id="searchTitle" placeholder="Enter a title" ng-model="searchTitle" />
      <button type="button" id="goSearchTitle" ng-click="goSearchTitle()">Search</button>
    </div>
  </div>
</body>

Answer 4

You made a typo at ng-contoller, it should be ng-controller

var myApp = angular.module("myapp", []);
myApp.controller("searchbyTitle", function($scope, $http) {
  $scope.goSearchTitle = function() {
    alert($scope.searchTitle);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myapp">
  <div ng-controller="searchbyTitle">
    <h3>Search by Title</h3>
    <div>
      <input type="text" id="searchTitle" placeholder="Enter a title" ng-model="searchTitle" />
      <button type="button" id="goSearchTitle" ng-click="goSearchTitle()">Search</button>
    </div>
  </div>
</body>

Click on the button without any reaction

Answer №1

Answer №2

Similar questions

Tips for saving and retrieving req.user using JsonwebToken

Set element back to its default state

Sending information from Ajax to PHP

How to make a specific table row stand out using AngularJS and CSS

Using TypeScript with Watermelondb

Tips for retrieving the MenuItem name upon click event using Menu and MenuItem components in Material UI React

What is the quickest method for importing React.js Material Icons in a single line of code?

What is the alternative method in JavaScript for locating items instead of using indexOf?

Efficiently pinpointing the <div> element with precision using jQuery

Having trouble directing the focus on an HTML5 element using Javascript and Selenium webdriver

Troublesome issue with the Focus() function in JavaScript

VueJS form validation does not account for empty inputs in both fields

Simulating SOAP requests using the Nock library

The compatibility between Laravel's @vite('resources/js/app.js') and the froala editor plugin seems to be causing issues

Elegant switch in jQuery

Is it possible to store an HTML element tag in a variable?

Troubleshooting $routeProvider issues in Angular

Guide on detecting and capturing a change in location history event

retrieve the value of an HTML element once it has been modified

A nifty little JavaScript tool