Asp.net 项目 - Javascript 按钮可点击但不执行该功能答案

【问题标题】：Asp.net Project - Javascript button is clickable but not carrying out the functionAsp.net 项目 - Javascript 按钮可点击但不执行该功能
【发布时间】：2021-05-22 00:20:36
【问题描述】：

我一直在尝试将 api 集成到我与一些朋友一起工作的项目中，但我很难获得“确定”按钮来实际执行该功能。它应该允许您上传照片，单击确定，然后它会返回有关植物的数据。 “选择文件按钮有效，但确定按钮无效。

由于已经创建了 API 示例，我在一个单独的解决方案中对其进行了测试，并且能够让它工作，这让我相信我在其他地方的代码中犯了错误，或者可能有一些东西阻止了程序与 API 的网址交谈。但由于某种原因，它在我试图将其集成到的项目中不起作用。（ASP.NET 剃须刀页面）。

我还尝试制作一个新按钮并将 javascript 标记移动到标题和其他位置，但这也不起作用，而且我已经没有尝试的想法了。为了隐私起见，我在下面省略了 api 密钥本身。我真的很感激任何关于这个主题的帮助！

@{
    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>

【问题讨论】：

标签： javascript c# asp.net visual-studio api

【解决方案1】：

我认为你最好给按钮一个“ID”而你没有。

我从来没有真正喜欢过“选择”某个按钮然后希望我们可以将点击事件附加到该按钮的想法。所以，我总是更喜欢你有一个按钮。你放置一个按钮。您为该按钮指定一个单击事件。您必须非常努力地弄清楚选择器会选择哪个按钮 - 它喜欢哪个按钮？

然后，当您单击该按钮时，代码或函数就会运行。它只是更容易遵循。

所以，你的按钮是这样的：

<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];

等等

问题在于点击事件的选择器受页面上控件和事物的顺序影响 - 可能无法正确拾取。

所以，只需按下一个按钮。说明该按钮在某些单击事件上应该做什么，这在这里应该会有所帮助。

【讨论】：

【解决方案2】：

使用querySelector 方法，您可以在文档的第一个按钮上添加onClick 事件。由于首先呈现_Layout.cshtml，我的第一个假设是您在该视图中有一个按钮？给按钮一个 id 并像这样添加onClick 事件怎么样：

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

【讨论】：