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

Question

I'm trying to make the value of an input text show on a pop-up, both on the click of an input button. For example, if I type "James" and press the button, "James" will show in the pop-up . (EXAMPLES BELOW)

However, the code below isn't working on my site (nor JSFiddle). It does work on the Stack Snippet, rather strangely. How can I fix the code so that it works everywhere?

JSFiddle (not working) - https://jsfiddle.net/23wom1f7/

Stack Snippet (working) -

 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">&times;</span> <h3>Preview Your Message:</h3> Name: <span id="modalname"></span> </div> </div>

Answer 1

This works: https://jsfiddle.net/zsetxdrg/

basically just changed this....

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

Looks like a scoping issue, check your console its not seeing the preview() function.