放置在工具栏中时未捕获我的输入字段

Question

我正在构建一个求职书签。它将获取您的关键字和位置并打开多个搜索选项卡。

由于某些原因，通过 Dice.com 进行搜索的第一个 link 没有捕获输入字段，并且在将所有内容都放入工具栏时无法正常工作。

最终版本将打开每个后续选项卡，每个选定站点的延迟为 1010 毫秒。

我已经完成了大部分代码，看起来不错，但是当我点击 Dice 的 hyperlink 时，没有任何反应。

拖放书签：

https://codepen.io/bookmarklets/pen/xeqJZb#

上面的Codepen打开了一个按钮，它是一个你拖到书签栏中的小书签。小书签代码在 Codepen HTML window 中可见。 Codepen CSS 可以忽略，因为它只与这个方便的按钮有关，与实际的 bookmarlet 无关。

<div style="float:left"><table><tr><td style="border-right-style:solid;text-align:right"><b>Job Searcher</b> &nbsp;<br><input type="checkbox" onClick="toggle(this)"; checked><label for="all" id="all" name="all"> All </label><input type="submit"> &nbsp;</td><td style="border-right-style:solid;border-right-color:#555;border-right-width:1px"><form><input type="text" placeholder="Enter&nbsp;Job&nbsp;Title" name="jobTitle" id="jobTitle" /> &nbsp;&nbsp;<br><input type="text" placeholder="Enter&nbsp;Location" name="jobLocation" id="jobLocation" /> &nbsp;&nbsp;</td><td>  &nbsp; <img src="https://assets.dice.com/techpro/img/favicons/favicon-32x32.png" height="16" /> &nbsp;<input type="checkbox" checked name="dice" id="dice"> <a onClick="goDice()"; href="#"> Dice</a></td></tr></table>

function goDice(){
    var role = document.getElementById('jobTitle').value;
    var b = document.getElementById('site').value;
    var goToDice='https://www.dice.com/jobs?q='+ role +'&l=' + b;
    goToDice = goToDice.replace(/[ ]/g,'+');
    goToDice = goToDice.replace(/,/g,'%2C');
    window.open(goToDice);
}

Answer 1

您的 ID 在 HTML 和 JS 之间不匹配。

在 JS 中，你有：

var role = document.getElementById('jobTitle').value;
var b = document.getElementById('site').value;

与此同时，在 HTML 你有：

id="jobTitle/"
id="jobLocation"

解决这些问题后，Dice link 确实打开了，并且在新的 window 中。

附带说明一下，最好不要在名称中使用 /。

放置在工具栏中时未捕获我的输入字段

My input fields are not being captured when placed in a toolbar

javascript

forms

input

toolbar