问题[javascript](coding)

我有一个 html 表单，可以过滤 div 中的结果列表。

我想要的是只重新加载 div 的内容而不是整个页面，并且只使用原始 javascript。

这是我目前所得到的，但它没有返回过滤结果：

document.querySelector('form[name="filters"]').addEventListener('submit', function (e) {
    
    e.preventDefault();
    var xhttp = new XMLHttpRequest();
    var action = document.querySelector('form[name="filters"]').getAttribute('action');
    var list = document.querySelector('.list');
    xhttp.responseType = "document";
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          list.innerHTML = this.response.querySelector('.list').innerHTML;
        };
    };
    xhttp.open("POST", action, true);
    xhttp.send();

});

我需要隐藏我的（计算）订单表中的 div，直到在选择菜单中做出选择。我缩小了这个“冰淇淋订单表”示例，看看是否有人有任何指导。

在这个例子中，我想要隐藏“toppings”div，直到从“scoopsSelector”选择菜单中做出选择。

.plus {
  display: none;
}

<h1>Ice Cream Order Form</h1>

<form action="icecream_formHandler.php" method="post" enctype="multipart/form-data">

  <select id="flavor" name="flavor">

    <option selected="true" disabled="disabled">Select Your Flavor</option>
    <option value="Vanilla">Vanilla</option>
    <option value="Chocolate">Chocolate</option>
    <option value="Strawberry">Mixed</option>

  </select><br><br>

  <select id="scoopsSelector" name="scoopsSelector" onchange="calcuMath()">

    <option value='0' selected="true" disabled="disabled">How Many Scoops?</option>
    <option value="3">One Scoop - $3.00</option>
    <option value="5">Two Scoops - $5.00</option>
    <option value="7">Three Scoops - $7.00</option>

  </select><br><br>

  <!-- This hidden input uses it's population to pass the <select> text instead of the <select> 
    value to the php form handler  -->

  <input type="hidden" id="scoops" class="scoops" name="scoops">

  <script>
    const scoopsSelector = document.getElementById('scoopsSelector')
    scoopsSelector.addEventListener('input', function() {
      let selectedOptText = scoopsSelector.options[scoopsSelector.selectedIndex].text
      document.querySelector('.scoops').value = selectedOptText;
    })
  </script>



  <div name="toppings" id="toppings">


    <p>Toppings: (Optional)</p>

    <select id="plus" class="plus">
      <option value="add" id="add">+</option>
    </select>

    <input type="hidden" id="nuts" name="nuts" value="0" ><input type="checkbox"
    name="nutsCheckbox" onchange="this.previousSibling.value=3-this.previousSibling.value; 
    calcuMath();">&nbsp;Nuts $3.00<br><br>

    <select id="plus" class="plus">
      <option value="add" id="add">+</option>
    </select>

    <input type="hidden" id="sprinkles" name="sprinkles" value="0"><input type="checkbox"
    name="sprinklesCheckbox" onchange="this.previousSibling.value=3-this.previousSibling.value; 
    calcuMath();">&nbsp;Sprinkles $3.00<br><br>

    <select id="plus" class="plus">
      <option value="add" id="add">+</option>
    </select>

    <input type="hidden" id="syrup" name="syrup" value="0"><input type="checkbox"
    name="syrupCheckbox" onchange="this.previousSibling.value=4-this.previousSibling.value; 
    calcuMath();">&nbsp;Syrup $4.00<br><br><br>

    <select id="plus" class="plus">
      <option value="add" id="add">+</option>
    </select>


  </div>


  <select id="dishSelector" name="dishSelector" onchange="calcuMath()">

    <option value='0' selected="true" disabled="disabled">Cup or Cone</option>
    <option value="3">Cup - $3.00</option>
    <option value="4">Cone - $4.00</option>

  </select><br><br><br>



  <input type="hidden" id="dish" class="dish" name="dish">

  <script>
    const dishSelector = document.getElementById('dishSelector')
    dishSelector.addEventListener('input', function() {
      let selectedOptText = dishSelector.options[dishSelector.selectedIndex].text
      document.querySelector('.dish').value = selectedOptText;
    })
  </script>

  TOTAL: $<a id="result"></a><br><br>

  <script>
    function calcuMath() {
      var z;
      var a = document.getElementById("scoopsSelector").value;
      var b = document.getElementById("nuts").value;
      var c = document.getElementById("sprinkles").value;
      var d = document.getElementById("syrup").value;
      var e = document.getElementById("dishSelector").value;
      var sel = document.getElementById("plus");
      var selection = sel.options[sel.selectedIndex].value;
      var more = document.getElementById("add");
      if (selection == "add") {
        z = parseFloat(a) + parseFloat(b) + parseFloat(c) + parseFloat(d) + parseFloat(e);
      }

      document.getElementById("result").innerHTML = "" + z + "";
    }
  </script>

  <input type="submit" id="submitButton" name="submitButton" value="Place Order">

</form>

我认为我理解了 async/await，但是我对代码中非常常见的场景中的部分感到困惑。

我有一个createOrder()处理订单的异步函数。在该函数返回任何值之前，它需要执行另一个异步函数来发送电子邮件确认sendEmail()。

我不想等待电子邮件发送后再将订单详细信息返回给客户。

所以我是这样处理的：

async function createOrder(){

try {
  //Create the order object 
  const order = {
        productid: 1234
        name: "helpful text"
        price: "55.00"
  }

  sendEmail(order); // I dont want to await this

  return {
    order // Client needs this ASAP without waiting for email to be sent
  }
}
catch (e) {
  console.error(e);
}

}

电子邮件功能发送邮件：

async function sendEmail(payload){

try {
   await axios.post('/emailer/send', {
       payload
   });

}
catch(e){
  console.error(e);
}
}

await我的问题是，我的 IDE在调用该函数时给出了一个我未曾使用过的警告sendEmail()。这只是一个建议，还是我的方法存在根本性错误？如果我错了，那么有什么更好的解决方法吗？

我想在运行时以以下方式修补类似文本编辑器的应用程序：当用户打开任何文件时，/tmp/predefined应该打开我预定义的文件（例如）而不是用户的原始文件。对于此任务，我使用带有 JavaScript API 的 Frida 工具包。我拦截所有open()系统调用，决定是否需要进行替换，如果需要，则用我预定义的参数替换第一个open()参数（要打开的文件的路径）。

脚本patcher.js：

function main()
{

Interceptor.attach(Module.getExportByName(null, 'open'), {
    onEnter(args) {
        const originalPath = args[0].readCString();
        if (shouldReplace(originalPath)){
            args[0].writeUtf8String('/tmp/predefined'); // (1)
            //args[0] = Memory.allocUtf8String("/tmp/predefined"); (2)
        }
    },
  });
}

function shouldReplace(path) {
if (!path) return false;
// Do not replace essential system or config files:
if (path.startsWith("/usr/") || path.startsWith("/etc/") || path.startsWith("/lib") || 
    path.startsWith("/var/") || path.startsWith("/proc/") || path.startsWith("/sys/") || 
    path.startsWith("/dev/") || path.startsWith("/run/") || path.startsWith("/home/user/.config/")
||  path.startsWith("/home/user/.cache") || path.startsWith("/home/user/.local") ) {
    return false;
}
// Avoid replacing if it's already the predefined file (prevent infinite loop)
if (path === "/tmp/predefined") {
    return false;
}
// Otherwise, assume it's a user-requested file and should be repalced
return true;
}

main()

作为文本编辑器，我使用gnome-text-editor Run frida 作为：./frida -l patcher.js -f /usr/bin/gnome-text-editor /tmp/originalFile

这似乎有效：/tmp/predefined打开而不是/tmp/originalFile。但是，如果我想为字符串“/tmp/predefined”分配新内存，并将指向此新内存的指针分配给 args[0]，而不是重写 args[0] 指向的内存的内容（取消注释 (2) 行，注释掉 (1) 行），我会收到错误：

1. 编辑器无法打开/tmp/predefined并写入Could Not Open File You do not have permissions to open the file
2. 在终端中：(gnome-text-editor:9036): editor-document-WARNING **: 11:11:33.542: Failed to load file: Error opening file /tmp/originalFile: No such file or directory，但是/tmp/originalFile存在。

由于这些错误仅当我尝试为字符串分配新内存并更改args[0]指针的值时才会发生，所以我想知道我是否正确使用了 Frida 的 JavaScript API 中的内存分配？

出于好奇，shadcn 的侧边栏在其组件文件顶部有“使用客户端”声明，其中包括 的声明SidebarProvider。根据我对 nextjs 的理解，当渲染客户端组件时，其所有子组件也会在客户端渲染。但 shadcn 文档鼓励使用 包装整个应用程序SidebarProvider。这不会在客户端渲染我们的整个应用程序并整体终止 ssr 吗？

我很确定事实并非如此，但这SidebarProvider在底层是如何运作的呢？

我正在尝试使用 SvelteMap：https://svelte.dev/docs/svelte/svelte-reactivity#SvelteMap

但由于某种原因，它没有反应。

我正在从 .svelte 文件导出它：

export const items = new SvelteMap<number, Item>();

Item是一个对象。

然后在函数内部我改变内容，例如：

const item = items.get(num);
item.someProp = newValue;

地图已更新，但组件中的反应性不起作用。

我也尝试重新分配该功能中的项目

const item = items.get(num);
item.someProp = newValue;
items.set(num, item);

还是不行..

我正在尝试使用 algolia 自动完成功能，列表显示正常，但是当我们单击它时，没有触发任何事件，关键字滚动也有效，但列表上的部分无效。

https://jsfiddle.net/qeLwbfpj/

const { autocomplete } = window['@algolia/autocomplete-js'];

var ac_instance = autocomplete({
    insights: true,
    container: '#autocomplete',
    placeholder: 'Type a name...',
    openOnFocus: true,

    getSources({ query }) {
        return [
            {
                sourceId: 'dummy-source',
                getItems() {
                    return [
                        { label: 'Apple', Id: '123' },
                        { label: 'Mango', Id: '456' },
                        { label: 'Banana', Id: '789' },
                        { label: 'Orange', Id: '101' }
                    ].filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
                },
                templates: {
                    item({ item }) {
                        return item.label;
                    }
                }
            }
        ];
    },

    onSelect(item ) {
        console.log(`File: dummy.php, Line: 62`, item);
        alert(`File: dummy.php, Line: 63`);
    },

    onSubmit(state) {
        alert(`File: dummy.php, Line: 67`);

    }
});

console.log(`File: dummy.php, Line: 79`, ac_instance);

我的目标是在提交表单时打开一个 paypal 页面，但什么也没有发生，所以我添加了没有记录任何内容的日志。

我的代码的第一个控制台日志出现了，但是函数内部的日志onSubmit()没有出现，但我也知道该函数正在运行，因为google.script.run.processForm()正在被调用并且也没有错误消息。

console.log("Page loaded, preparing to submit form");

window.onload = function() {
  var form = document.querySelector('form');
  console.log(form)
  form.addEventListener('submit', onSubmit); // Listen for the submit event
}

function onSubmit(event) {
  event.preventDefault();

  alert("onSubmit() was called!");
  console.log("Form submitted");

  google.script.run
    .withSuccessHandler(function(url) {
      console.log("Redirecting to:", url);

      if (typeof url === "string" && url.startsWith("https://")) {
        window.open(url, "_self");
      } else {
        alert("Error: Invalid PayPal link.");
      }
    })
    .processForm();
}

<form>
  <iframe src="https://docs.google.com/forms/d/e/(private)/viewform?embedded=true" width="640" height="1169" frameborder="0" marginheight="0" marginwidth="0">Wird geladen…</iframe>
</form>

我有一个库，其中添加了以下数组类型 -

Array.prototype.top = function() {
    return (this.length > 0) ? this[this.length-1] : null;
    }

它似乎适用于非数组对象 - 例如，

for (key in myrecordset) {
    alert(key);                // will iterate and alert "top";
    } 

      

在调试器控制台中：

> myrecordset.length
< undefined
> typeof myrecordset
< 'object'
> myrecordset instanceof(Array)
< false
> myrecordset['top']
< f() {
      return (this.length ...
      }

那么，这是什么情况？该对象不是 JavaScript 数组（即，没有长度，不是实例，...），但 Array.prototype.top 似乎已应用？

注意：此外，尝试遵循原型链我得到

> myrecordset.constructor()
< {}
    [[ Prototype ]]: Object

范围：使用 myrecordset 的屏幕截图

我正在制作 Chrome 扩展程序。我试图让弹出窗口可拖动并能够在屏幕上移动。我可以移动它，但它卡在屏幕右侧，直到到达max-width。我做错了什么？

这是简化的代码。

const popup = document.getElementById("popup");
const dragBtn = document.getElementById("drag-btn");

let offsetX, offsetY, isDragging = false;

dragBtn.addEventListener("mousedown", (e) => {
    isDragging = true;
    offsetX = e.clientX - popup.offsetLeft;
    offsetY = e.clientY - popup.offsetTop;
});

document.addEventListener("mousemove", (e) => {
    if (isDragging) {
        popup.style.left = `${e.clientX - offsetX}px`;
        popup.style.top = `${e.clientY - offsetY}px`;
    }
});

document.addEventListener("mouseup", (e) => {
    isDragging = false;
});

#popup {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 350px;
    max-width: 500px;
    background: var(--dark-bg, #222);
    color: var(--dark-text, #fff);
    border: 1px solid #333;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 8px;
    z-index: 10000;
}

#popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

#popup-title {
    font-size: 14px;
    font-weight: bold;
}

button {
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    width: 26px;
    height: 26px;
    text-align: center;
    padding: 0;
}

#drag-btn {
    background: #326042;
    color: white;
    cursor: grab;
}

#theme-btn {
    background: #ef713b;
    color: white;
}

#close-btn {
    background: #ff5252;
    color: white;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Song Lyrics Finder</title>
    <link rel="stylesheet" href="src/style.css">
</head>
<body>
    <div id="popup">
        <div id="popup-header">
            <p id="popup-title">Song Lyrics Finder (from Genius.com)</p>
            <div style="display: flex; align-items: center; gap: 5px;">
                <button id="drag-btn">✥</button>
                <button id="theme-btn">&#9681;</button>
                <button id="close-btn">&#11199;</button>
            </div>
        </div>
    </div>
</body>
</html>