我正在尝试使input
文本的值显示在弹出窗口上,两者都通过单击输入按钮来实现。例如,如果我输入“James”并按下按钮,“James”将显示在弹出窗口
中。 (下面的例子)
但是,下面的代码
无法在我的网站上运行(也不能在 JSFiddle 上运行)。
奇怪的是,它确实在堆栈片段上起作用。如何修复代码
以便它在任何地方都能工作?
JSFiddle(不工作)- https://jsfiddle.net/23wom1f7/
堆栈片段(工作)-
function preview() {
var fname = document.getElementById("fname").value;
document.getElementById("modalname").innerHTML = fname;
}
var modal = document.querySelector(".modal");
var trigger = document.querySelector("#preview");
var closeButton = document.querySelector("#close");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scaleX(1.1) scaleY(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
#close {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
#close:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scaleX(1.0) scaleY(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
<input class="formData" id="fname" type="text" maxlength="20" name="fname" placeholder="First Name" autocomplete="off">
<input type="button" class="formAsk" id="preview" onclick="preview()" name="preview" value="PREVIEW">
<div class="modal">
<div class="modal-content">
<span id="close">×</span>
<h3>Preview Your Message:</h3>
Name: <span id="modalname"></span>
</div>
</div>
最佳答案
这有效:https://jsfiddle.net/zsetxdrg/
基本上只是改变了这个......
this.preview = function() {
var fname = document.getElementById("fname").value;
document.getElementById("modalname").innerHTML = fname;
}
看起来像是范围问题,请检查您的控制台是否没有看到预览()函数。
关于javascript - 在 CSS 弹出窗口中显示输入文本值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48604709/