如何修复：TypeError:enrollUser is not a function at HTMLButtonElement.onclick

Question

I am trying to call enrollUser function on onclick event in index.html. enrollUser() is also defined in index.js. Still it giving me an error on onclick event.

Heres are codes for your reference. Let me what's wrong in these..

enrollUser.js

'use strict';
const FabricCAServices = require('fabric-ca-client');
const { Wallets } = require('fabric-network');
const fs = require('fs');
const yaml = require('js-yaml');
const path = require('path');

async function main(uname) {
    try {
        // load the network configuration
        let connectionProfile = yaml.safeLoad(fs.readFileSync('../gateway/connection-uni.yaml', 'utf8'));

        // Create a new CA client for interacting with the CA.
        const caInfo = connectionProfile.certificateAuthorities['ca.uni.example.com'];
        const caTLSCACerts = caInfo.tlsCACerts.pem;
        const ca = new FabricCAServices(caInfo.url, { trustedRoots: caTLSCACerts, verify: false }, caInfo.caName);

        console.log(`----------------- Creating ID for: ${uname} -----------------`)
        
        //function body

}

module.exports.execute = main;

index.js

const express = require('express');
const app = express();
const cors = require('cors');
const port = 3000;


const enrollUser = require('./enrollUser');

app.use(cors());
app.use(express.json()); // for parsing application/json
app.use(express.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.set('title', 'Educhain App');

app.get('/', function (req, res) {  
   res.sendFile( __dirname + "/" + "index.html" );  
});


app.post('/enrollUser', (req, res) => {
    enrollUser.execute(req.body.uname)
            .then(() => {
                console.log('User credentials added to wallet');
                const result = {
                    status: 'success',
                    message: 'User credentials added to wallet',
                    uname: req.body.uname
                };
                res.json(result);
            })
            .catch((e) => {
                const result = {
                    status: 'error',
                    message: 'Failed',
                    error: e
                };
                res.status(500).send(result);
            });
});

app.listen(port, () => console.log(`Distributed Certification App listening on port ${port}!`));

index.html

<script type="text/javascript" src="./app.js"></script>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<button type="submit" id="enrollUser" onclick="enrollUser()">Login</button></div>

app.js

let enrollUser = () => {
    const uname = document.getElementById('uname').value;
    
    $.post('http://localhost:3000/enrollUser', {uname: uname})
            .done((result) => {
                console.log(result);
                if (result.status === 'success') {
                    $(".studentTable tbody").append(
                            "<tr>" +
                            "<td>1</td>" +
                            "<td id='uname'>" + result.uname + "</td>" +
                            "</tr>"
                    );
                } else {
                    $(".error-toast").toast('show');
                }
            })
            .fail((xhr, status, error) => {
                $(".error-toast").toast('show');
            });
};

Also giving error to app.js in index.html--> GET http://localhost:3000/app.js net::ERR_ABORTED -- > 404 (Not Found)

Not getting any error on console, but it's on chrome developer tool. Please let me know what's missing.

I am using the same structure as this project https://github.com/avi-githb/Certification_Network_Hyperledger_fabric/tree/master/application

Answer 1

To make this work the way you explained in the comments you would need to run the server first. For you, this is the app.js file.

Make sure to have node installed and run this command in your project directory.

node index.js

You will know the server running by seeing a message with the port in the console.

Secondly, modify your HTML to contain a form, then pass the form on submitting to the endpoint enrollUser

<form action="http://localhost:3000/enrollUser" method="POST">
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<button type="submit">Login</button>
</form>

This should work well for you, learn more about forms here .