Asp.net Project - Javascript button is clickable but not carrying out the function

I've been trying to integrate an api into a project that I have been working on with some friends but I'm having difficulty with getting the "ok" button to actually execute the function. It's supposed to allow you to upload a photo, click ok, and then it returns data about the plant. The "choose files button works, but the ok button doesn't.

Since the API sample was already created I tested it in a separate solution and was able to get it to work which leads me to believe that I've made a mistake in the code somewhere else or maybe there's something blocking the program from talking to API's web address. But for some reason it doesn't work within the project that I'm trying to integrate it into. (ASP.NET razor page).

I've also tried making a new button and moving the javascript tag into the header and other spots but that didn't work either, and I've run out of ideas to try. I have omitted the api key itself below for the sake of privacy. I'd really appreciate any help on the subject!

@{
    ViewData["Title"] = "Identify a Plant";

}
   
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <form>
        <input type="file" multiple />
        <!--<button type="button">OK</button> -->
        <button type="button">OK</button>
    </form>

    <script type="text/javascript">
        document.querySelector('button').onclick = function sendIdentification() {
            const files = [...document.querySelector('input[type=file]').files];
            const promises = files.map((file) => {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        const res = event.target.result;
                        console.log(res);
                        resolve(res);
                    }
                    reader.readAsDataURL(file)
                })
            })

            Promise.all(promises).then((base64files) => {
                console.log(base64files)

                const data = {
                    api_key: "Die8ewFGvpw5JrRTuOEjgGR10uL--",
                    images: base64files,
                    modifiers: ["crops_fast", "similar_images"],
                    plant_language: "en",
                    plant_details: ["common_names",
                        "url",
                        "name_authority",
                        "wiki_description",
                        "taxonomy",
                        "synonyms"]
                };

                fetch('https://api.plant.id/v2/identify', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data),
                })
                    .then(response => response.json())
                    .then(data => {
                        console.log('Success:', data);
                    })
                    .catch((error) => {
                        console.error('Error:', error);
                    });
            })

        };
    </script>
</body>

</html>

2 answers

  • answered 2021-02-19 01:46 dekanidze

    With the querySelector method you add the onClick event on a first button within the document. Since the _Layout.cshtml is rendered first, my first assumption is that you have a button in that view? What about giving an id to the button and adding the onClick event like this:

    document.getElementById("myButton").onclick = function sendIdentification() {
        //the code
    };
    

  • answered 2021-02-19 03:57 Albert D. Kallal

    I think you are better off to give the button a "ID" and you don't.

    and I never really did like this idea of "selecting" some button and then hoping we can attached a click event to that button. So, I always preferred that you have a button. You place a button. You specify a click event for that button. You have to really struggle to figure out which button that selector going to pick up - which one does it like?

    And then when you click on that button, the code or function runs. It just a lot easier to follow.

    So, your button thus is this:

    <form id="form1" runat="server">
        <div>
            <br />
             <input id="myfiles" type="file" multiple="multiple" />
    
        <!--<button type="button">OK</button> -->
        <button id="MyButton" type="button"  onclick="sendIdentification()"   >OK</button>
        </div>
      </form>
    
    <script type="text/javascript">
    
     function sendIdentification() {
        alert('start');
    
            const files = [...document.querySelector('input[type=file]').files];
    

    etc.

    The problem is that selector for the click event is subject to the order of the controls and things on the page - might not be picked up correct.

    So, just drop in a button. State what that button supposed to do on some click event, and this should help here.