Develop Reference

Creating a button based on user input

I have a website where you can enter information into an input box and then below it a button that says "add". When pushing this button I want it to create a new button with the text inputted above.
I'm not quite sure even where to start with the javascript but here's my html:
<input type="text" name="device" id="device">
<button class="add">Add</button>\
I'm just trying to make an add button make another button with the text in input box above.

Concepts
You need to change the DOM and append a new Element to your HTML.
To do this you need to capture the value when you click on the button and, after that, render the new element. I've created a Codepen to help you with that:
To explain:
HTML
<input id="my-input" placeholder="Place your text here" />
<button id="my-button">Submit</button>
<p id="my-content"></p>
Every element has an id that you'll use on your...
Javascript:
const myInput = document.getElementById('my-input')
const myButton = document.getElementById('my-button')
const content = document.getElementById('my-content')
myButton.addEventListener('click', function(event) {
const myInputValue = myInput.value;
content.innerHTML = myInputValue
})
By first we get all elements on DOM using document.getElementById function. After that we add an event to our button, the event of click. After that, we catch the value inputted by the user and change the HTML inner our p tag and put the text that have been inputted in our input.
So, after that, the text will be rendered on the screen and you can see what you have inputted.
Soluctions
By now, using this concept, we can now use this and change also, in our element, the style of showing or not. You can follow to this other Codepen that I'll use in our example:
HTML:
<input id="my-input" placeholder="Place your text here" />
<button id="my-button">Submit</button>
<button id="my-other-button"></button>
Javascript
const myInput = document.getElementById('my-input')
const myButton = document.getElementById('my-button')
const myOtherButton = document.getElementById('my-other-button')
myOtherButton.style.display = 'none'
myButton.addEventListener('click', function(event) {
const myInputValue = myInput.value;
myOtherButton.style.display = 'block'
myOtherButton.innerHTML = myInputValue
})
So, now we are capturing our elements as before, but that time we capture also an empty button and, with style.display property we change, when the first render occurs, to not showing our button. After we click in the first button we change it again to show it and, as before, change the innerHTML with the text that user have inputted.

How to change the value of an attribute inside the class on the DOM?

I am having trouble changing the value of an attribute that is inside a class, for example:
<input class="has-input" value="5" ...>
And i have tried to do it like this :
document.getElementsByClassName("has-input")[0].setAttribute("value",1);
This would change the value inside the DOM but not on the page and when I try to press the button the real value did not change.
Another way i tried is:
document.getElementsByClassName("has-input")[0].value=1;
This would change the value visually on the page, but once you click the button the real value did not change.
How do I change the real value of that attribute and why does it change in the DOM and page but once I click a button its the old value?

Your second try is pretty close, but you forgot to select the first element:
document.getElementsByClassName('has-input')[0].value = 1;
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
console.log(e.target.num.value);
});
<form>
<input class="has-input" name="num" value="5">
<button>Submit</button>
</form>

on focus display just one element

I have a simple problem:
I have a form:
<form>
<textarea type="text" name="comment_text" class="comment-input"></textarea>
<div class="remaining"></div>
<input type="submit" class="button comment-button" />
</form>
Now when the textarea (.comment-text) is focused I want the submit button (.comment-button) to be displayed using jQuery.
$(document).ready(function() {
//display the comment button when the comment textarea is focused
$('.comment-input').focus(function() {
$('.comment-button').fadeIn(800);
});
});
This works fine. The problem is that I have the form in a foreach loop and when I focus one textarea all the buttons get selected. So I was trying to do it with the 'this' keyword something like this:
$(document).ready(function() {
//display the comment button when the comment textarea is focused
$('.comment-input').focus(function() {
$(this).find('.comment-button').fadeIn(800);
});
});
But that did not work. After trying things out for way too long now, I just decided that I do not speak sufficient jQuery to master this simple task and turned to somebody in the know for help!
Thank you in advance!

That is because the button is a sibling element of the textarea
$(this).siblings('.comment-button').fadeIn(800);

find will try to find a child element in the textarea so it will never find your button:
you can use siblings
$(document).ready(function() {
//display the comment button when the comment textarea is focused
$('.comment-input').focus(function() {
$(this).siblings('.comment-button').fadeIn(800);
});
});

Sibling is the solution for this problem , but no more will works if you wrap the submit button in any wrapper(div or span) .
This will work safer -
$(this).closest("form").find('.comment-button').fadeIn(800);

There are others ways to get the correct element other than these 3 answers,
$(this).parent().find('.comment-button').fadeIn(800);
or
$(this).next().next().fadeIn(800);
or
$(this).nextUntil('.comment-button').next().fadeIn(800);

Dynamically creating input elements onclick

Hey guys so I am creating input elements within a div when I click on a specific radio button with a javascript function.
It works great but when I first load the form the input elements dont appear in the div because the radio button has not been "clicked yet" although one of the radio buttons is default checked.
Basically if its checked I want them to appear, so on body load I have to call a function that checks the radio button I want default and I have to manually display the corresponding input elements that would appear if I had clicked the radio button.
This seems like a dumb work around of what I am trying to achieve, any ideas?
<body onload="startup()">
<input type="radio" name="type" onclick="createInput()" id="testradio" value="test">test</input>
<div id="area">
</div>
</body>
function startup()
{
document.getElementById("testradio").checked = true
createInput();
}
function createInput()
{
var testinput = "<input name='options' value='testing' type='checkbox'>test<br>"
document.getElementById("area").innerHTML = testinput
}

You should set the default value and then call the event. (say onchange)
something like this:
document.getElementById('elID').onchange();
this will then let your event listener fire as if the value where changed in the ui not in code.

Making a text box read only after some data is fetched into it

I Have a text box and a control button next to it.Clicking on the button will call another function where some data is selected and written back to the text box.Currently my text box is editable by the user after the data is fetched to the text box.I want to make the text box read only after the user clicks on the button and fetches the data to the text box,So that now the data is present in the text box which cannot be edited.If the user has to change the data,the user has to again click on the button to call the function which will help us over write the data in the text box.How can I accomplish this in javascript.

you can do it like this
HTML:
<input type="text" id="mytextbox" value="click the button below."/>
<input type="button" value="click" onclick="changeText();"/>
Javascript:
function changeText(){
var text_box = document.getElementById('mytextbox');
if(text_box.hasAttribute('readonly')){
text_box.value = "This text box is editable.";
text_box.removeAttribute('readonly');
}else{
text_box.value = "This text box is read only.";
text_box.setAttribute('readonly', 'readonly');
}
}
fiddle example: http://jsfiddle.net/b7jAy/

you can use jQuery .attr() function to set the readonly status of the text field.
$('#textfield').attr('readonly', true);
$('#textfield').attr('readonly', 'readonly');

Please try with JQuery. Thousands of reasons to use it as Javascript framework. Here is a response to your question:
Add "readonly" to <input > (jQuery)
Hope that helps,

Assign an id attribute to the text box, say <input id=foo>, and use
document.getElementById('foo').readOnly = true;