We Keep Coding

Create HTML text in an HTML form and open up the text in a Javascript alert box

I'm new to coding and need to create HTML text in an HTML form on a page and open up the text in a Javascript alert box. I've tried various code to no success. Here is what I've come up with so far which does not create a pop up alert box:
Here is the HTML and the JS:
Function myfunction1()
{
Let myfun1 = document.getElementById('sec1-input').value;
Alert(myfun1);
}
<div class="form-group">
<label for="sec1-input"><strong>Enter Alert Text: </strong></label>
<input type="text" class="form-control" id="sec1-input">
</div>
<button id="sec1-btn1" type="button" class="btn btn-primary">Alert Me!</button>

I'm not sure what do you want, but I'll show you how to make an alert window exactly as you're asking.
First of all you must consider several mistakes that you are making. JavaScript does not recognize the word Function because it is capitalized. The function keyword must be lowercase.
Here I leave you a referring link with JavaScript reserved words: https://www.w3schools.com/js/js_reserved.asp
On the other hand, I see that you are not using the form tag, which leads to two problems: technical and semantic. Here I leave you another link with reference to forms: https://www.w3schools.com/html/html_forms.asp
Finally, to achieve what you want you need to work with events, especially with the click event. Here I will leave you a reference link and the solution you want:
let button = document.querySelector('#sec1-btn1');
button.addEventListener('click', function(e) {
let val = document.querySelector('#sec1-input').value;
alert(val);
});
<form>
<div class="form-group">
<label for="sec1-input"><strong>Enter Alert Text: </strong></label>
<input type="text" class="form-control" id="sec1-input" />
</div>
<button id="sec1-btn1" type="button" class="btn btn-primary">
Alert Me!
</button>
</form>

You have not called the function anywhere. For it to work you need to use a listener.
<div class="form-group">
<label for="sec1-input"><strong>Enter Alert Text: </strong></label>
<input type="text" class="form-control" id="sec1-input">
</div>
<button onclick="myfunction1()" id="sec1-btn1" type="button" class="btn btn-primary">Alert Me!</button>
<script>
function myfunction1() {
let myfun1 = document.getElementById('sec1-input').value;
alert(myfun1)
}
</script>
I added the onClick listener to button and now it works.

javaScript is case sensitive
function myfunction1()
{
let myfun1 = document.getElementById('sec1-input').value;
alert(myfun1);
}
<div class="form-group">
<label for="sec1-label"><strong>Enter Alert Text: </strong></label>
<input type="text" class="form-control" id="sec1-input">
</div>
<button id="sec1-btn1" type="button" onClick="myfunction1()" class="btn btn-primary">Alert Me!</button>
also IDs of elements should not be the same , to assign same selector , use class and you also need to give your function to your element's event listener

You should not start javascript functions like alert with capital letters.
Put this piece of code instead of your button:
<button id="sec1-btn1" type="button" class="btn btn-primary" onclick="myfunction1()">Alert Me!</button>

jquery saving form input into an array of objects then displaying them, getting uncaught typeError

I am currently working on a bootstrap-styled form that allows a person to enter a handler and a comment.It has a button that, when clicked, will call a jquery event handler that saves the handler,comment, and Date.now() in an object that will be pushed in the array users.
However, I keep getting
"Uncaught TypeError: Cannot read property 'handler' of undefined at HTMLButtonElement.,at HTMLButtonElement.dispatch,at HTMLButtonElement.v.handle."
The error is from the .js file line : $("#display").val......
Form and display area code
<form>
<div class="form-group">
<label for="exampleFormControlInput1">handle</label>
<input type="text" class="form-control" id="handle" placeholder="#joe">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="comm" rows="3" placeholder="Bad match last night, Joe sucked"></textarea>
</div>
<button id="button1" type="submit" class="btn btn-primary">Post</button>
</form>
<h1 id="display"></h1>
jquery .js file
$(document).ready(
function(){
var users = [];
$("#button1").click(function(){
var person={
handler:$("#handle").val(),
comment:$("#comm").val(),
postDate:Date.now()
};
users.push(person);
$("#display").val(users[0].person.handler+"<br>"+users[0].person.comment);
});
});
I am new to jquery and thus I am not sure how to fix this error.

users[0].person.handler should be users[0].handler. The variable is named person, but the array itself doesn't care about that. Same thing for users[0].person.comment.
Edit: Also, you might need an preventDefault() call to stop the page from refreshing (unless that's what you want.
$("#button1").click(function(e){
e.preventDefault();
var person = {
handler:$("#handle").val(),
comment:$("#comm").val(),
postDate:Date.now()
};
users.push(person);
// i changed this to .html() because val() felt wrong
$("#display").html(users[0].handler+"<br>"+users[0].comment);
});

Use users[0].handler instead of users[0].person.handler. Although the variable is named person, what is actually pushed into the users Array is just a reference to the person Object.
Also, use the .html() method to set the innerHTML of the #display h1 as a h1 does not have a value attribute.
$(document).ready(
function(){
var users = [];
$("#button1").click(function(e){
var person={
handler:$("#handle").val(),
comment:$("#comm").val(),
postDate:Date.now()
};
users.push(person);
e.preventDefault();
$("#display").html(users[0].handler+"<br>"+users[0].comment);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="form-group">
<label for="exampleFormControlInput1">handle</label>
<input type="text" class="form-control" id="handle" placeholder="#joe">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="comm" rows="3" placeholder="Bad match last night, Joe sucked"></textarea>
</div>
<button id="button1" type="submit" class="btn btn-primary">Post</button>
</form>
<h1 id="display"></h1>

Getting hiddenvalue HTML property from javascript

I am trying to access the hidden HTML value (hiddenvalue) from javascript and storing it into a variable env.
HTML:
<button id="slct" hiddenfield="Forest" type="button" class="btn btn-default">Hello</button>
JS:
$('#slct').click(function (event) {
document.getElementById('env').value = $('#' + $(event.target).data('hiddenfield')).value;
});
What am I missing?

I would create a hidden html field
<input type="hidden" id="someId" value="someValue">
Getting the value of this field would look like:
var theValue = document.getElementById('someId').value;
What you want is probably this:
html:
<input type="hidden" id="env" value="">
<button class="slct" hiddenfield="Forest" type="button" class="btn btn-default">This sets Forest</button>
<button class="slct" hiddenfield="Fruit" type="button" class="btn btn-default">This sets Fruit</button>
javascript:
$('.slct').click(function(event) {
// Set value to hidden field
$('#env').val($(this).attr('hiddenfield'));
});
you can use data() instead of attr(), but the attribute needs to start with 'data-' then. E.g. data('hiddenvalue') to retrieve the value of attribute data-hiddenvalue
(see https://jsfiddle.net/2k0791hk/1/)

Manipulate button properties from a template in a JS node

I have an HTML template consisting of a DIV that contains three buttons.
<template ID="template3buttons">
<div ID="container3buttons" class="boxes">
<div ID= "sunShadeUp" class="boxes">
<input type="button"
id="SunshadeButtonUp"
class="SunshadeSmallButton"
onclick="GenericAction('ENO_ShutterStop($all)', 'all')"
value=""/>
</div>
<div ID= "sunShadeStop" class="boxes">
<input type="button"
id="SunshadeButtonStop"
class="SunshadeSmallButton"
onclick="GenericAction('ENO_ShutterStop($all)', 'all')"
value=""/>
</div>
<div ID= "sunShadeDown" class="boxes">
<input type="button"
id="SunshadeButtonDown"
class="SunshadeSmallButton"
onclick="GenericAction('ENO_ShutterStop($all)', 'all')"
value=""/>
</div>
</div>
</template>
I use JS to generate many copies of the template, which are eventually inserted into appropriate DIVs.
function create3Button(cellButtonId) //create boxes with 3 buttons each
{
var template3buttons = document.querySelector('#template3buttons');
var insertionPoint= document.getElementById(cellButtonId);
var clone = document.importNode(template3buttons.content, true);
insertionPoint.appendChild(clone);
}
Now, i need to manipulate the content of the 'onclick' tag for each copy of the template depending on the insertion point. I understand that getElementById() does not work for DOM nodes. What are the alternatives?

If you use jQuery you can do this:
$("[id*=sunShade]").children().click(function() {
alert( "Handler for .click() called." );
});

Execute javascript function in chain of button clicks

On my original post I wasn't for sure on the amount of depth I should go to. Here is what I have been working on since the jQuery answer was posted:
I am attempting to execute a task which requires the user to choose and click one html button out of a series of buttons and then be required to choose another html button out of a series of buttons.
Essentially I would like the value of the first button selection to be passed as a parameter to a function that will run when the user clicks the second button. I'm just learning javascript and I'm lost.
Thank you
HTML:
<form id="scoreboard">
<div>
<input type="text" name="homeTeam" value="00" size="2" "readonly" id="homeTeamScore"/>
<input type="button" value="+1" name="add1" id="homeAdd1" class="homeScore" onClick="calcScore(1)"/>
<input type="button" value="-1" name="neg1" id="homeNeg1" class="homeScore" onClick="calcScore(4)"/>
</div>
<div>
<input type="button" name="homeP1" id="homeP1" class="player" value="24" style="text-align:center;"/>
<input type="text" name="homeP1Score" value="0" size="2" style="text-align:center;"/>
</div>
<div>
<input type="button" name="homeP2" id="homeP2" class="player" value="44" style="text-align:center;"/>
<input type="text" name="homeP2Score" value="0" size="2" style="text-align:center;"/>
</div>
</form>
Javascript:
function calcScore(amount) {
if(amount==1) {scoreboard.homeP1Score.value++;scoreboard.homeTeam.value++;}
else if(amount==4) {scoreboard.homeP1Score.value--;scoreboard.homeTeam.value--;}
}
$('.player').click(function() {
//initialize the second button listener
var data = $(this).attr('data');
$('.homeScore').click(function() {
function addHomeScore(data)
});
});

Using jQuery:
$('#buttonId').click(function() {
//initialize the second button listener
var data = $(this).attr('data');
$('#button2Id').click(function() {
yourFunction(data);
});
});
This method is better because it uses JavaScript scoping to avoid globals. Since JavaScript (especially with jQuery) sometimes has multiple threads/functions executing at the same time, it's very easy to run into problems with globals. They're also very hard to test and unsafe.

In raw JavaScript:
HTML:
<button class="button1" onclick="saveValue()" />
<button class="button2" onclick="callMethod()" />
JavaScript:
myGlobalVariable = null;
function saveValue(){
myGlobalVariable = "Value That Was Selected";
}
function callMethod(){
alert(myGlobalVariable + "I HAZ ACCESS TO GLOBALS!!!!");
}
In jQuery:
HTML:
<button class="button1" />
<button class="button2" />
JavaScript:
myGlobalVariable = null;
$('button.button1').click(function(){
myGlobalVariable = "Value That Was Selected";
});
$('button.button2').click(function(){
alert(myGlobalVariable + "I HAZ ACCESS TO GLOBALS!!!!");
});

setup some global variable in js. then on each button setup some onClick events that go and change the global var. then the next button click can check to see the value in the global var
<button onclick="myFunction()">Click me</button>