Asp.net 项目 - Javascript 按钮可点击但不执行 function

Question

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

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

我还尝试制作一个新按钮并将 javascript 标签移动到 header 和其他位置，但这也没有用，而且我已经没有尝试的想法了。 为了隐私起见，我在下面省略了 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>

Answer 1

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

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

Answer 2

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

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

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

因此，您的按钮是这样的：

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

等等

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

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