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>

React form with multiple buttons - how to choose one to handle onSubmit event?

Let's say I have this HTML:
<div id="container"></div>
<p>Output: <span id="output"></span></p>
and this JS:
function otherAction(e) {
document.getElementById('output').innerHTML = 'otherAction';
e.preventDefault();
}
function submit(e) {
document.getElementById('output').innerHTML = 'submit';
e.preventDefault();
}
ReactDOM.render(
<form onSubmit={submit}>
<input type="text" defaultValue="foo" />
<button onClick={otherAction}>Other Action</button>
<button type="submit">Submit</button>
</form>,
document.getElementById('container')
);
Actually, let's not just say it, let's put it in a JSFiddle example. What I want to happen is that:
Clicking the "Other Action" button triggers the otherAction function (it does!)
Clicking the "Submit" button triggers the submit function (it does!)
Putting your cursor in the text box and pressing enter triggers the submit function (this does not work currently!)
In #3, what happens instead is that otherAction gets triggered. How can I change that?

If you set the first button to type="button" (i.e. provide a type for each button) it should work.
<button type="button" onClick={otherAction}>Other Action</button>
https://jsfiddle.net/L0urqamz/3/

You should provide types for all buttons, otherwise it won't work:
<form onSubmit={handleSubmit}>
// form content
<button type="button" onClick={someButtonEvent}>DO STH</button>
<button type="submit">SUBMIT</button>
</form>

Create input dynamically

I want to insert an input(type=file) when I click the button using js but the input element appear for miliseconds and then right after it dissapears.
Here's my code:
function addInputImg(){
var div2 = document.getElementById("imgFiles");
var inputImg = document.createElement('input');
inputImg.type = 'file';
div2.appendChild(inputImg);
}
<form ...>
.
.
<button id='btnAgregarImg' onclick="addInputImg();">Agregar imagen</button>
<div id='imgFiles'>
</div>
</form>

Button <button> inside a form element are treated like a submit button by default. In your case, when you are pressing the button inside the form, the form is getting submitted and the page gets reloaded every time.
Try to set your button's type attribute as button to avoid this issue.
<button type="button" id='btnAgregarImg' onclick="addInputImg();">Agregar imagen</button>

Change the button type to "button" to prevent the form from being submitted.
https://jsfiddle.net/g5Lxr2ac/
<button id='btnAgregarImg' type="button" onclick="addInputImg();">Agregar imagen</button>

Change this:
<button id='btnAgregarImg' onclick="addInputImg();">Agregar imagen</button>
To this:
<button id='btnAgregarImg' type="button" onclick="addInputImg();">Agregar imagen</button>

Insert javascript variable between string

<script type="text/javascript">
$('#did').html('<input type="submit" name="mybtn" value="Save" onClick="saveContent('+valA+')">');
function saveContent(con){
alert (con);
}
</script>
I am using this code to display a submit button and it comes to the page body. but when clicked on the button it is not alerting the value. Please help me...
Thanks

Why type="submit"?
assuming #did is the id of your div or some container
$("#did").html($("<input type='button' value='save' />").click(function(){
alert(valA);
}));
This will append a button in your div with click event attached to it. Remember type should be button for this case.

Escape insert variable
Your result is:
<input type="submit" name="mybtn" value="Save" onClick="saveContent(sometext)">
Error : sometext is not defined
$('#did').html('<input type="submit" name="mybtn" value="Save" onClick="saveContent(\''+valA+'\')">');
function saveContent(con){
alert (con);
}
Result of this:
<input type="submit" name="mybtn" value="Save" onClick="saveContent('sometext')">
but use better previous answer

Multiple JavaScript Buttons (Variables)

I'm just beginning JavaScript, and I was wondering how to make different buttons do different things. So far, I can make one button do one thing, but how do I make a second button do a different thing? Here's the coding:
<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Your Name");
if (name!=null && name!="")
{
alert("Thanks for clicking " + name + "!");
window.top.location.replace("http://www.google.com");
}
}
</script>
</head>
<body>
<ul>
<li>
<input type="button" onclick="show_prompt()" value="Button One" />
</ul>
</body>
</html>

I will guess you meant like doing different things with different buttons but from the same function:
JavaScript:
function myFunction(str) {
if(str.length > 3){
alert("big");
}else{
alert("small");
}
}
HTML:
<input type="button" onclick="myFunction('test');" value="Button 1" />
<input type="button" onclick="myFunction('hi');" value="Button 2" />
In case my assumption is wrong, just create different functions and replace the button's onclick with their respective function

Define another function and bind the second button to it!
function alert_hi() {
alert("Hi!");
}
<input type="button" onclick="alert_hi()" value="Button Two" />
If that catches your interest I highly recommend Eloquent Javascript.

Making the second button do something is basically identical to making the first do something. It'd just be two functions and two buttons. I think this is what you're asking about.
<html>
<head>
<script type="text/javascript">
function doSomething()
{
// Do something when button one is clicked
}
function doSomethingElse()
{
// Do something else when button two is clicked
}
</script>
</head>
<body>
<input type="button" onclick="doSomething()" value="Button One" />
<input type="button" onclick="doSomethingElse()" value="Button Two" />
</body>
</html>

If you're serious about learning.. you can read up about Event Registration models.
in the case of your example.
js
var btn1 = document.getElementById('btn1'),
btn2 = document.getElementById('btn2');
btn1.addEventListener('click', show_me, false); // i am not IE friendly
btn2.addEventListener('click', show_me, false); // you can replace show_me with any function you would like.
function show_me() {
alert(this.value + ' was clicked'); // this references the element which the click event was invoked on.
}
html
<input type="button" id="btn1" value="Button One" />
<input type="button" id="btn2" value="Button Two" />