为什么我这里的按钮'sendWidthHeight' 点击了没有任何反应？

因为在代码中没有为按钮 'sendWidthHeight' 添加事件监听器，所以点击按钮时没有任何反应。需要为按钮添加事件监听器，例如：/n/njavascript/nsendWidthHeight.addEventListener(/'click/', function () {/n console.log(/'sendWidthHeight clicked/');/n // 添加发送宽高的代码/n});/n/n/n在上面的代码中，我们使用 addEventListener() 方法为 'sendWidthHeight' 按钮添加了一个点击事件监听器。当用户点击该按钮时，click 事件会被触发，执行监听器中的代码。/n/n完整代码示例:/n/nhtml/n<div id=/'floating-div/'>/n <div id=/'drag-bar/'>🤚</div>/n <div>/n <div id=/'buttons/'>/n <button type=/'button/'>txt2img</button>/n <button type=/'button/'>img2img</button>/n </div>/n <div id=/'inputText/'>/n <textarea placeholder=/'每行一个Prompt，可多行批量生成/' rows=/'2/'></textarea>/n <br>/n <a href=/'/'>By: Pendave</a>/n </div>/n </div>/n <form>/n <input type=/'file/' id=/'file/'><button type=/'button/' class=/'myBtn/' id=/'sendWidthHeight/'>发送</button>/n <br />/n <div id=/'showWidthHeight/'>/n 宽：<input type=/'text/' id=/'img-width/'>px    高：<input type=/'text/' id=/'img-height/'>px/n </div>/n </form>/n</div>/n/n<script>/n// 定义 floating div HTML 代码/nconst floatingDivHtml = `/n <div id=/'floating-div/'>/n <div id=/'drag-bar/'>🤚</div>/n <div>/n <div id=/'buttons/'>/n <button type=/'button/'>txt2img</button>/n <button type=/'button/'>img2img</button>/n </div>/n <div id=/'inputText/' >/n <textarea placeholder=/'每行一个Prompt，可多行批量生成/' rows=/'2/'></textarea>/n <br>/n <a href=/'/'>By: Pendave</a>/n </div>/n </div>/n <form>/n <input type=/'file/' id=/'file/'><button type=/'button/' class=/'myBtn/' id=/'sendWidthHeight/'>发送</button>/n <br />/n <div id=/'showWidthHeight/'>/n 宽：<input type=/'text/' id=/'img-width/'>px    高：<input type=/'text/' id=/'img-height/'>px/n </div>/n </form>/n </div>`;/n/n// 添加浮动 div 到页面中/ndocument.body.insertAdjacentHTML(/'beforeend/', floatingDivHtml);/n/nvar lines;/nvar i;/nvar vet1;/nvar vet2;/n/nconst myButtons = document.body.querySelector(/'#buttons/');/nconst myInputText = document.body.querySelector(/'#inputText textarea/');/nconst toggleButton1 = myButtons.firstElementChild;/nconst toggleButton2 = myButtons.lastElementChild;/n/ntoggleButton1.addEventListener(/'click/', function () {/n toggleButton1.disabled = true;/n var str = myInputText.value;/n var s = str.replace(//s*/n+/s*/g, /'<0D0A>/');/n lines = s.split(/'<0D0A>/');/n console.log(s);/n i = 0;/n vet1 = setInterval(clicktxt2img, 1000);/n});/n/ntoggleButton2.addEventListener(/'click/', function () {/n toggleButton2.disabled = true;/n var str = myInputText.value;/n var s = str.replace(//s*/n+/s*/g, /'<0D0A>/');/n lines = s.split(/'<0D0A>/');/n console.log(s);/n i = 0;/n vet2 = setInterval(clickimg2img, 1000);/n});/n/nfunction clicktxt2img() {/n var button1Skip = document.body.querySelector(/'#txt2img_skip/');/n // var button1Skip = gradioApp().querySelector(/'#txt2img_skip/');/n if (isHide(button1Skip)) {/n console.log(lines[i]);/n if (lines[i] != /'/') {/n var txt2img_textarea = document.body.querySelector(/n /'#txt2img_prompt > label > textarea/'/n );/n txt2img_textarea.focus();/n txt2img_textarea.value = lines[i];/n/n txt2img_textarea.dispatchEvent(new Event(/'input/', { bubbles: true }));/n/n var button1 = document.body.querySelector(/'#txt2img_generate/');/n button1.click();/n }/n i += 1;/n/n console.log(/'完成了：/' + i);/n }/n/n if (i >= lines.length) {/n toggleButton1.disabled = false;/n clearInterval(vet1);/n }/n}/n/nfunction clickimg2img() {/n var button2Skip = document.body.querySelector(/'#img2img_skip/');/n if (isHide(button2Skip)) {/n console.log(lines[i]);/n if (lines[i] != /'/') {/n var img2img_textarea = document.body.querySelector(/n /'#img2img_prompt > label > textarea/'/n );/n img2img_textarea.focus();/n img2img_textarea.value = lines[i];/n/n img2img_textarea.dispatchEvent(new Event(/'input/', { bubbles: true }));/n/n var button2 = document.body.querySelector(/'#img2img_generate/');/n button2.click();/n }/n i += 1;/n/n console.log(/'完成了：/' + i);/n }/n/n if (i >= lines.length) {/n toggleButton2.disabled = false;/n clearInterval(vet2);/n }/n}/n/nfunction isHide(obj) {/n var ret =/n obj.style.display === /'none/' ||/n obj.style.display === /'/' ||/n (obj.currentStyle && obj.currentStyle === /'none/') ||/n (window.getComputedStyle &&/n window.getComputedStyle(obj, null).display === /'none/');/n/n return ret;/n}/n/n///n// 获取对 floating div 和拖动栏的引用/nconst floatingDiv = document.getElementById(/'floating-div/');/nconst dragBar = document.getElementById(/'drag-bar/');/n/n// 定义 floating div 的起始位置/nlet startPosX =0;/nlet startPosY = 0;/n/n// 定义鼠标点击的起始位置/nlet startClickX = 0;/nlet startClickY = 0;/n/n// 定义处理拖动条上的 mousemove 事件的函数/nfunction handleMouseMove(event) {/n event.preventDefault();/n event.stopPropagation();/n // 计算 floating div 的新位置/n const newPosX = startPosX + (event.clientX - startClickX);/n const newPosY = startPosY + (event.clientY - startClickY);/n/n // 设置 floating div 的位置/n floatingDiv.style.left = newPosX + /'px/';/n floatingDiv.style.top = newPosY + /'px/';/n}/n/n// 定义在拖动条上处理 mouseup 事件的函数/nfunction handleMouseUp(event) {/n event.preventDefault();/n event.stopPropagation();/n // Remove the event listeners for mouse move and mouse up events/n document.removeEventListener(/'mousemove/', handleMouseMove);/n document.removeEventListener(/'mouseup/', handleMouseUp);/n}/n/n// 为拖曳条添加一个事件监听器，用于处理鼠标 down 事件/ndragBar.addEventListener(/'mousedown/', function (event) {/n event.preventDefault();/n event.stopPropagation();/n // 获取浮动 div 的起始位置/n startPosX = floatingDiv.offsetLeft;/n startPosY = floatingDiv.offsetTop;/n/n // 获取鼠标点击的起始位置/n startClickX = event.clientX;/n startClickY= event.clientY;/n/n // 为 mousemove 和 mouseup 事件添加事件监听器/n document.addEventListener(/'mousemove/', handleMouseMove);/n document.addEventListener(/'mouseup/', handleMouseUp);/n});/n/n//////////nconst imgOriginalWidth = document.getElementById(/'img-width/');/nconst imgOriginalHeight = document.getElementById(/'img-height/');/nconst showWidthHeight = document.getElementById(/'showWidthHeight/');/nconst inputFile = document.getElementById(/'file/');/n/nfunction loadImage(src) {/n var img = new Image();/n img.onload = function () {/n var ratio = img.width / img.height;/n imgOriginalWidth.value = img.width;/n imgOriginalHeight.value = img.height;/n imgOriginalWidth.oninput = function () {/n imgOriginalHeight.value = Math.round(imgOriginalWidth.value / ratio);/n };/n imgOriginalHeight.oninput = function () {/n imgOriginalWidth.value = Math.round(imgOriginalHeight.value * ratio);/n };/n };/n img.src = src;/n}/n/nfunction getImageSizeFromFile(input) {/n if (input.files && input.files[0]) {/n var reader = new FileReader();/n reader.onload = function (e) {/n loadImage(e.target.result);/n };/n reader.readAsDataURL(input.files[0]);/n }/n}/n/nfunction getImageSizeFromClipboard(event) {/n var items = event.clipboardData.items;/n if (items) {/n for (var i = 0; i < items.length; i++) {/n if (items[i].type.indexOf(/'image/') !== -1) {/n var blob = items[i].getAsFile();/n var reader = new FileReader();/n reader.onload = function (e) {/n loadImage(e.target.result);/n };/n reader.readAsDataURL(blob);/n }/n }/n }/n}/n/ninputFile.addEventListener('change', function() {/n getImageSizeFromFile(this);/n});/n/n/nshowWidthHeight.addEventListener('paste', function(event) {/n getImageSizeFromClipboard(event);/n});/n/n// 双击文本区可以上传/nshowWidthHeight.ondblclick = function () {/n inputFile.click();/n};/nshowWidthHeight.ondragenter = function (e) {/n e.preventDefault();/n};/nshowWidthHeight.ondragover = function (e) {/n e.preventDefault();/n};/nshowWidthHeight.ondrop = function (e) {/n e.preventDefault();/n inputFile.files = e.dataTransfer.files;/n e.files = inputFile.files;/n getImageSizeFromFile(e);/n};/n/n/n// 设置宽高/nconst imgWidth = document.querySelector(/'#txt2img_width input/');/nconst imgWidthScroller = imgWidth.parentNode.parentNode.nextElementSibling;/nconst imgHeight = document.querySelector(/'#txt2img_height input/');/nvar imgHeightScroller = imgHeight.parentNode.parentNode.nextElementSibling;/n/nconst sendWidthHeight = document.getElementById(/'sendWidthHeight/');/n// 发送调整好的图像高宽到 SD WebUI/nsendWidthHeight.onclick = function () {/n console.log('AAAAAA');/n console.log(imgOriginalWidth.value);/n console.log(imgOriginalHeight.value);/n/n imgWidth.value = imgWidthScroller.value = imgOriginalWidth.value;/n imgHeight .value = imgHeightScroller.value = imgOriginalHeight.value;/n/n}/n</script>/n/n/n在这个示例中，我们为按钮 'sendWidthHeight' 添加了一个点击事件监听器，当按钮被点击时，将会执行监听器内的代码。代码将获取图像的原始宽高，并设置到 imgWidth 和 imgHeight 以及它们对应的滚动条的值上。/n/n请确保你的 txt2img_width 和 txt2img_height 以及它们的滚动条已经存在于页面中。/n/n如果你仍然遇到问题，请检查你的代码，确保你已经正确添加了事件监听器，并且代码能够正确获取图像的原始宽高。/n/n一些额外的建议:/n/n* 使用一个代码编辑器，它可以帮助你识别错误和格式化代码。/n* 使用浏览器的开发者工具来调试你的代码。/n* 如果你仍然遇到问题，请提供更多代码和上下文信息，以便我更好地帮助你。