英文:
I am getting "Uncaught ReferenceError: tippy is not defined "
问题
我已经编写了这段代码。
require 'watir'
b = Watir::Browser.new
b.window.maximize
b.goto 'URL'
# var headElement = document.getElementsByTagName("head")[0];
sleep 3
b.execute_script("
const popperStylesheet = document.createElement('link');
popperStylesheet.rel = 'stylesheet';
popperStylesheet.href = 'https://unpkg.com/@popperjs/core@2.11.6/dist/umd/popper.css';
const tippyStylesheet = document.createElement('link');
tippyStylesheet.rel = 'stylesheet';
tippyStylesheet.href = 'https://unpkg.com/tippy.js@6.3.3/dist/tippy.css';
const popperScript = document.createElement('script');
popperScript.src = 'https://unpkg.com/@popperjs/core@2.11.6/dist/umd/popper.js';
const tippyScript = document.createElement('script');
tippyScript.src = 'https://unpkg.com/tippy.js@6.3.3/dist/tippy.umd.js';
tippyScript.onload = function() {
const customStyles = document.createElement('style');
customStyles.innerHTML = \`
.custom-theme {
background-color: #1c00d4;
color: #ffffff;
border-radius: 10px;
}
.custom-theme .tippy-arrow {
color: #0012d4;
}
.tippy-box {
background-color: Green;
}
.tippy-content {
font-size: 20px;
}
\`;
var inputElement = document.getElementById('UserName');
if (inputElement) {
console.log('Selected file:');
inputElement.addEventListener('focus', function() {
inputElement._tippy.show();
});
tippy(inputElement, {
content: 'Here you enter the first name, firstname should contain no numbers',
theme: 'custom-theme',
placement: 'right',
arrow: true,
duration: 300,
delay: [500, 0],
maxWidth: 200
});
}
var headElement = document.getElementsByTagName(\"head\")[0];
headElement.appendChild(popperStylesheet);
headElement.appendChild(tippyStylesheet);
headElement.appendChild(tippyScript);
headElement.appendChild(popperScript);
headElement.appendChild(customStyles);
};
var headElement = document.getElementsByTagName(\"head\")[0];
headElement.appendChild(popperStylesheet);
headElement.appendChild(tippyStylesheet);
headElement.appendChild(tippyScript);
headElement.appendChild(popperScript);
")
我无法检查这个tippy方法是否被定义，它经常会抛出这个错误。
未捕获的 ReferenceError: tippy 未定义
在 tippyScript.onload (eval 在 executeScript (login.do:476:16), <匿名>:47:5)
在调用它之前，我们有没有办法检查这个方法是否被正确定义？即使在执行之前我已经使用了如上所示的sleep 3，但我仍然经常收到这个错误。
英文:
I have written this code
require 'watir'
b = Watir::Browser.new
b.window.maximize
b.goto 'URL'
# var headElement = document.getElementsByTagName(\"head\")[0];
sleep 3
b.execute_script("
const popperStylesheet = document.createElement('link');
popperStylesheet.rel = 'stylesheet';
popperStylesheet.href = 'https://unpkg.com/@popperjs/core@2.11.6/dist/umd/popper.css';
const tippyStylesheet = document.createElement('link');
tippyStylesheet.rel = 'stylesheet';
tippyStylesheet.href = 'https://unpkg.com/tippy.js@6.3.3/dist/tippy.css';
const popperScript = document.createElement('script');
popperScript.src = 'https://unpkg.com/@popperjs/core@2.11.6/dist/umd/popper.js';
const tippyScript = document.createElement('script');
tippyScript.src = 'https://unpkg.com/tippy.js@6.3.3/dist/tippy.umd.js';
tippyScript.onload = function() {
const customStyles = document.createElement('style');
customStyles.innerHTML = `
.custom-theme {
background-color: #1c00d4;
color: #ffffff;
border-radius: 10px;
}
.custom-theme .tippy-arrow {
color: #0012d4;
}
.tippy-box {
background-color: Green;
}
.tippy-content {
font-size: 20px;
}
`;
var inputElement = document.getElementById('UserName');
if (inputElement) {
console.log('Selected file:');
inputElement.addEventListener('focus', function() {
inputElement._tippy.show();
});
tippy(inputElement, {
content: 'Here you enter the first name, firstname should contain no numbers',
theme: 'custom-theme',
placement: 'right',
arrow: true,
duration: 300,
delay: [500, 0],
maxWidth: 200
});
}
var headElement = document.getElementsByTagName(\"head\")[0];
headElement.appendChild(popperStylesheet);
headElement.appendChild(tippyStylesheet);
headElement.appendChild(tippyScript);
headElement.appendChild(popperScript);
headElement.appendChild(customStyles);
};
var headElement = document.getElementsByTagName(\"head\")[0];
headElement.appendChild(popperStylesheet);
headElement.appendChild(tippyStylesheet);
headElement.appendChild(tippyScript);
headElement.appendChild(popperScript);
")
I don't have any way to check whether this tippy method is defined, it often throws this error
Uncaught ReferenceError: tippy is not defined
at tippyScript.onload (eval at executeScript (login.do:476:16), <anonymous>:47:5)
Is there any way can we check whether this method is defined correctly before we call it? I have even used sleep 3 as shown above before we execute it but still I am getting this error often.
答案1
得分: 0
在JavaScript中，函数被视为"一等公民"。当你定义一个函数function f() {}时，实际上你只是创建了一个函数（在一小段时间内是匿名的），并将其引用存储在一个名为f的变量中。你可以像检查其他变量一样检查f的存在（以及其类型等）。
示例：
function f1() { console.log("I am f1()!"); }
var f3 = f1; // 两个变量都引用相同的实际函数
console.log("f1 is a " + typeof f1);
console.log("f2 is a " + typeof f2);
console.log("f3 is a " + typeof f3);
if (typeof f1 != "undefined") f1();
if (typeof f2 != "undefined") f2();
if (typeof f3 != "undefined") f3();
输出：
f1 is a function
f2 is a undefined
f3 is a function
I am f1()!
I am f1()!
英文:
Functions in JS are "first class objects". When you define a function f() {}, you're just creating a function (anonymous for a very little while) and storing its reference in a variable called f. You can check for the existence of f (and its type, etc) in the same way you would check for any other variable.
Example:
function f1() { console.log ("I am f1()!"); }
var f3 = f1; // Both variables will reference the same actual function
console.log ("f1 is a " + typeof f1);
console.log ("f2 is a " + typeof f2);
console.log ("f3 is a " + typeof f3);
if (typeof f1 != "undefined") f1();
if (typeof f2 != "undefined") f2();
if (typeof f3 != "undefined") f3();
Output:
f1 is a function
f2 is a undefined
f3 is a function
I am f1()!
I am f1()!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论