将参数传递给这个函数不起作用? [英] Passing parameters into this function not working?
问题描述
我正在尝试构建一些可重复使用的代码片段，以创建打字机效果.它隐藏一个段落，然后用一些 js 代码一次打印一个字符的另一个段落替换它.我正在尝试制作段落的 id 和我可以重用的文本参数，但是我无法让这些参数通过我的函数.到目前为止，一些非常有帮助的人帮助了我，但我无法弄清楚这最后一步.
我将附加我的函数，然后不带参数传递.任何帮助将不胜感激.
<div class="style typeClick"><p id="remove">隐藏我</p><p id="类型"></p><风格>.风格 {高度:2em；宽度:100%；背景颜色:白色；}身体{背景颜色:浅灰色；}.隐藏 {显示:无；}</风格><脚本>/* ---------- 没有按预期工作 ---------- */(() => {函数 hideInitText() {let hide = document.getElementById("remove");hide.classList.add("隐藏");}隐藏初始化文本()；//创建一个参数，通过它获取每个idconst typeWriter = ((id, text) => {让 letCounter = 0;返回 () =>{让循环，类计数器；让打字机=文本；让速度= 50;//完成后循环遍历每个id循环 = document.querySelectorAll(id);for (classCounter = 0; classCounter 当使用 https://codepen.io/1010543618/pen/MWWLxmN?editors=0110 I am trying to build some re-usable code snippets that create a typewriter effect. It hides a paragraph and then replaces it with another paragraph with some js code that prints one character at a time. I am trying to make the id of the paragraph and the text parameters that I can re-use but I am having trouble allowing these parameters to pass through my function. Some very helpful individuals have helped me thus far but I can't figure out this final step. I will attach both my function with and then without parameters passing through. Any help would be greatly appreciated.
When using https://codepen.io/1010543618/pen/MWWLxmN?editors=0110
这篇关于将参数传递给这个函数不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！((id, text) => {})() 时，该函数以零参数调用.如果您想为此函数提供参数，请不要使用 IIFE，或使用 (id, text) =>{ ((id, text) => {})(id, text) }. const typeWriter = (selector, text) =>{让 letCounter = 0;让循环，类计数器；让打字机=文本；让速度= 50;//完成后循环遍历每个id循环 = document.querySelectorAll(selector);函数类型输出(){if (letCounter < typewriter.length) {for (classCounter = 0; classCounter <body>
<div class="style typeClick">
<p id="remove">Hide Me</p>
<p id="type"></p>
</div>
</body>
<style>
.style {
height: 2em;
width: 100%;
background-color: white;
}
body{
background-color: lightgrey;
}
.hide {
display: none;
}
</style>
<script>
/* ---------- DOESNT WORK AS EXPECTED ---------- */
(() => {
function hideInitText() {
let hide = document.getElementById("remove");
hide.classList.add("hide");
}
hideInitText();
//make a parameter that will take each id through it
const typeWriter = ((id, text) => {
let letCounter = 0;
return () => {
let cycle, classCounter;
let typewriter = text;
let speed = 50;
//Cycle through each id after done
cycle = document.querySelectorAll(id);
for (classCounter = 0; classCounter < cycle.length; classCounter++) {
typeOut();
}
function typeOut() {
if (letCounter < typewriter.length) {
cycle[classCounter].innerHTML += typewriter.charAt(letCounter);
letCounter++;
setTimeout(typeWriter, speed);
}
}
};
})();
document.querySelector('.typeClick').addEventListener('click', function() {typeWriter("#type", "type out text")});
})();
/* ---------- WORKS AS EXPECTED ---------- */
(() => {
function hideInitText() {
let hide = document.getElementById("remove");
hide.classList.add("hide");
}
hideInitText();
//make a parameter that will take each id through it
const typeWriter = (() => {
let letCounter = 0;
return () => {
let cycle, classCounter;
let typewriter = "Type out text";
let speed = 50;
//Cycle through each id after done
cycle = document.querySelectorAll("#type");
for (classCounter = 0; classCounter < cycle.length; classCounter++) {
typeOut();
}
function typeOut() {
if (letCounter < typewriter.length) {
cycle[classCounter].innerHTML += typewriter.charAt(letCounter);
letCounter++;
setTimeout(typeWriter, speed);
}
}
};
})();
document.querySelector('.typeClick').addEventListener('click', typeWriter());
})();
</script>
((id, text) => {})() the function is called with zero argument. If you want to give args to this function please don't use IIFE, or using (id, text) => { ((id, text) => {})(id, text) }. const typeWriter = (selector, text) => {
let letCounter = 0;
let cycle, classCounter;
let typewriter = text;
let speed = 50;
//Cycle through each id after done
cycle = document.querySelectorAll(selector);
function typeOut() {
if (letCounter < typewriter.length) {
for (classCounter = 0; classCounter < cycle.length; classCounter++) {
cycle[classCounter].innerHTML += typewriter.charAt(letCounter);
letCounter++;
}
setTimeout(typeOut, speed);
}
}
typeOut();
};
