I am studying a vanilla JS and I would like to create a form wherein the values in the input elements will be displayed inside a button. I am planning to create a form where the user will fill the questions out with their details then those answers will be displayed on the same HTML page formatted in a certain template. Currently, I can display the output however there's no line break per value. Also, since the display is a button element, the user should be able to click it to copy the formatted answers that they can paste on notepad or MS word. Is this even possible in vanilla JS or do I have to learn JS frameworks? Can you share your thoughts?
Example display on a button that can be clicked to copy the below information:
Name: John Smith (line 1)
Age: 99 (line 2)
This is the current output:
This is my current scripts:
<form name="myForm">
Name: <input type="text" id="myName" name="myName">
Age: <input type="number" name="myAge" id="myAge">
<button type="submit" name="createBtn" id="createBtn" onclick="create(); return
false">CREATE</button>
</form>
<div>
<button type="submit" id="copyBtn" onClick="copy(); return false">
<span id="userName"></span>
<span id="userAge"></span>
</button>
</div>
<script>
function create() {
document.getElementById('userName').innerHTML = document.myForm.myName.value;
document.getElementById('userAge').innerHTML = document.myForm.myAge.value;
}
function copy() {
// insert the needed function here
}
</script>