Javascript 在CSS弹出窗口中显示输入文本值

我试图使

输入

文本的值显示在弹出窗口中，这两种方法都是通过单击输入按钮来实现的。例如，如果我键入“James”并按下按钮，“James”将显示在

弹出窗口中

。（以下示例）

但是，下面的

code

在我的站点（或JSFIDLE）上不起作用。 奇怪的是，它在堆栈片段上确实起作用。如何修复

代码

，使其在任何地方都能工作

JSFIDLE（不工作）-

堆栈代码段（工作）-

函数预览（）{
var fname=document.getElementById（“fname”）.value；
document.getElementById（“modalname”）.innerHTML=fname；
}
var modal=document.querySelector（“.modal”）；
var触发器=document.querySelector（“预览”）；
var closeButton=document.querySelector（“关闭”）；
函数toggleModal（）{
modal.classList.toggle（“显示模态”）；
}
函数windowOnClick（事件）{
如果（event.target==模态）{
切换模式（）；
}
}
trigger.addEventListener（“单击”，切换模式）；
closeButton.addEventListener（“单击”，切换模式）；
window.addEventListener（“单击”，windowOnClick）
.modal{
位置：固定；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.5）；
不透明度：0；
可见性：隐藏；
转换：scaleX（1.1）scaleY（1.1）；
过渡：可见性0s线性0.25s，不透明度0.25s 0s，变换0.25s；
}
.模态内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景色：白色；
填充：1雷姆1.5雷姆；
宽度：24rem；
边界半径：0.5雷姆；
}
#接近{
浮动：对；
宽度：1.5雷姆；
线高：1.5雷姆；
文本对齐：居中；
光标：指针；
边界半径：0.25雷姆；
背景颜色：浅灰色；
}
#关闭：悬停{
背景色：暗灰色；
}
.显示模态{
不透明度：1；
能见度：可见；
转换：scaleX（1.0）scaleY（1.0）；
过渡：可见性0s线性0s，不透明度0.25s 0s，变换0.25s；
}

&时代；
预览您的邮件：
姓名：
这项工作：

基本上只是改变了这个

this.preview = function() {
  var fname = document.getElementById("fname").value;
  document.getElementById("modalname").innerHTML = fname;
}

看起来像是范围问题，请检查您的控制台，它没有看到preview（）函数。
对于JSFIDLE，“您已将JSFIDLE配置为将代码包装在onload事件处理程序中。因此，您尝试调用onclick的函数超出范围。”可能重复的可能重复的可以，谢谢！事实上，我又试了一次，输入周围有标签，但现在不起作用了！有解决办法吗？