How do I copy (or even having a button to select it all) a document.getelementbyid output field in html?

Question

I'm trying to essentially set up a button that will either copy a bunch of text that will get output to a document.getelementbyid output to help me out while at work. This is what I have so far for the output and everything works, but would love to have a button that will automatically highlight everything taken from all my input fields.

function display(){

    var caller = document.getElementById("form1").value;
    var ctn = document.getElementById("form2").value;
    var fan = document.getElementById("form3").value;
    var business = document.getElementById("form4").value;
    var requestor = document.getElementById("form5").value;
    var reason = document.getElementById("form6").value;
    document.getElementById("output").innerHTML = "form1: " + form1 + "<br>form2: " + form2 + "<br>form3: " + form3 + "<br>form4: " + form4 + "<br>form5: " + form5 + "<br>form6: " + form6;
}

This feeds data from my input fields at the top (naturally they have different names and labels in the document, just can't copy anything proprietary here). The below codes are the button code and the paragraph code to display it when I click so that it appears on the page for me to select.

<button onclick="display();" style="width: 50px; background-color:#3ea055">Submit</button>

<p id="output"></p>

I've tried several different snippets of code online to get it to either select or copy or whatever, and it isn't working.

Answer 1

you dont have variables named form1 form2 etc., in the output area I've changed the values to your variable names try this

 function display(){ var caller = document.getElementById("form1").value; var ctn = document.getElementById("form2").value; var fan = document.getElementById("form3").value; var business = document.getElementById("form4").value; var requestor = document.getElementById("form5").value; var reason = document.getElementById("form6").value; document.getElementById("output").innerHTML = "form1: " + caller + "<br>form2: " + ctn + "<br>form3: " + fan + "<br>form4: " + form4 + "<br>form5: " + requestor + "<br>form6: " + form6; } 

Answer 2

在将值打印到output元素的行中，需要使用刚填充的变量。

document.getElementById("output").innerHTML = "form1: " + caller + "<br>form2: " + ctn+ "<br>form3: " + fan + "<br>form4: " + business + "<br>form5: " + requestor + "<br>form6: " + reason;