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>

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to turn each function within the module pattern into a promise?

Utilizing Angular 1.5, I have developed a factory function that returns a literal object structured as follows: return { item: null, get: function() { return item; }, create: function() { if (this.get()){ this.remove(); ...

Having a collection of JSON objects, I am unable to remove an element using the pop() method in JavaScript

Hello everyone, I have a collection of JSON objects that are initially set to null in the program like this: var jsonToSaveToDB = [ { ProductID: null, Quantity: null, TotalPrice: null } ]; As the pr ...

ReactJS is making a controlled input of type text into an uncontrolled component with the help of a component transformation

I am encountering a situation where I fetch data from the server and set values in the state for controlled inputs. For example, if I have an input field with a value of this.state.name, I retrieve the name "Dave" from the server and set it in the state as ...

What is the best way to fully eliminate the Pixi renderer, stage, and all associated assets

I am currently faced with a challenge of mounting and unmounting a Pixi stage using React without relying on react-pixi. Upon re-mounting the component, I encounter the following error: Uncaught Error: Resource with name "cupCake.png" already exists i.ad ...

Guide on integrating Materialize into an Angular 2 project

Currently in the process of transitioning from angular 1.5 to angular 2 for my latest project. While setting up the new app, I encountered an issue related to compatibility with a library. The library in question is angular2-materialize, but unfortunately ...

RTM is lacking dropdown navigation menus

In Visual Studio 2013 beta versions, there were dropdown menus at the top of the javascript editor that functioned similarly to those in c# and vb editing. Have these been removed from the RTM or final release, or are they available with a specific version ...

Experiencing a 404 error while making an API PUT request with a route parameter

In my Express app, I am attempting to hit the following API url: // Dashboard API for updating accounts app.post('/api/accounts/:id', accountsController.update); Below is my complete accounts module with Accounts factory and specific descriptio ...

Is it possible to create two separate Express sessions simultaneously?

I am encountering an issue with my Passport-using application that has a GraphQL endpoint and a /logout endpoint. Strangely, when I check request.isAuthenticated() inside the GraphQL endpoint, it returns true, but in the /logout endpoint, it returns false. ...

Cease the firing of ion-change until the values have been successfully loaded from storage

My settings page contains multiple ion-toggle's. There's an onChange method to update local storage when toggled. Standard procedure involves checking existing values in storage on page load and mapping them to the toggles using ngModel. <tab ...

I'm looking to showcase information from a nested JSON file within the ng-click event in Angular. How can this be achieved effectively?

I am currently exploring ways to display nested JSON data that relates to the data retrieved from the previous ng-click event. Any suggestions or insights on this matter would be highly appreciated. Thank you! Check out the plunker example here: http://p ...

Tips for properly invoking a function from one component to another component

After browsing through a few questions on the topic of parent/child elements, I have come across a particular node tree that looks like this: IndexPage -> Modals -> ClientDetails (it's modal component) -> Header My goal is to ...

What causes the form to be submitted when the text input is changed?

I'm puzzled by the behavior of this code snippet that triggers form submission when the input value changes: <form> <input type="text" onchange="submit();"> </form> Typically, I would expect something along t ...

Exploring AngularJS: the power of directives and the art of dependency

According to Angular documentation, the recommended way to add a dependency is by following these steps: Source //inject directives and services. var app = angular.module('fileUpload', ['ngFileUpload']); app.controller('MyCtrl&ap ...

effectively showcasing information in a datatable by converting JSON data into objects

I am looking for a way to display balance information in datatables, but I have not been able to find a solution yet. <!DOCTYPE html> <html lang="en"> <head> <title>Comment</title> <meta charset="u ...

Adjusting a Vue Slider with a changing value

Currently, I am utilizing the Vue Slider component from this source. My goal is to enhance the functionality of the slider by increasing it to the next index and beyond. The issue lies in the fact that the current implementation increments by 1, as the val ...

Forcing a property binding update in Angular 2

Take a look at this particular component import {Component} from 'angular2/core' @Component({ selector: 'my-app', providers: [], template: ` <div> <h3>Input with two decimals</h3> <input type ...

javascript monitoring numerous socket channels for echoes

Currently, I am in the process of developing a chat application. On the server side, I am utilizing: php, laravel 5.4, and pusher. On the client side, I have incorporated vue.js along with laravel-echo. Initially, I successfully created a "public chat roo ...

Tribal Code Typescript Compiler

Typescript is a great alternative to Javascript in my opinion, but it bothers me that it requires node.js as a dependency. Additionally, I find it frustrating that there seems to be only one compiler available for this language, and it's self-hosted. ...

Registration process in Node Express application encounters persistent loading when accessed through Postman

I've been working on a signup model for user accounts in Node.js, but when testing it in Postman, I encountered an issue where there was no response or failure. This left me stuck and I received the following error message in my terminal: Unhandled ...

The functionality of Layout.tsx is inconsistent across various pages

I'm having trouble with the console.log() code to display the page path only showing up in the "pages.tsx" file (src/app/pages.tsx) and not appearing in the console for other files located in (src/page/Login). Here is the code from layout.tsx: ' ...