Develop Reference

get the text entered in input box using java-script

I'm new to javascript I'm trying to create a web page where we can enter
name in an input box and using javascript's alert method show an alert box which says hello and the name that we entered in the input box
my code is
//html
<input id="test" type="text" name="nm" placeholder="Enter name">
<button onclick="fun(i dont know what to pass here in order to get the text entered in that text box)" type="button" name="button">Click here</button>
//javascript
//i tried like this...first
function fun(x) {
alert("HELLO" + x);
}
//i tried this...then
var x = document.getElementsById("test").value; [->here i also dono what to put.]
function fun(x) {
alert("HELLO" + x);
}

It should be getElementById instead of getElementsById. I hope this helps, and happy learning :)
Your code:
function fun() {
var textInTest = document.getElementById("test").value;
alert("Value entered" + textInTest);
}
<input id="test" type="text" name="nm" placeholder="Enter name">
<button onclick="fun()" type="button" name="button">Click here</button>

Show/hide angular element by condition

I built a feature adding "and zombies" to book names of choice, using basic angular.
<input type="text" ng-model="bookname" onclick="zombies()">
<h1> {{bookname}} </h1>
I want the "and zombies" (and the text inserted in the input) to be displayed only when there's text inside the input.
I tries this for starts, just to call the angular using JS and it doesn't work.
<script>
function zombies() {
document.getElementsByTagName("h1").innerHTML = "{{}}" + "and zombies";
};
</script>
How do I display the text when there's text inside the input?
(please go easy on me, I'm studying alone and you all started as juniors)

You Just need to add the condition which checks the value of bookname and display the static content with your name.
Like this -
<input type="text" [(ngModel)]="bookname" (click)="zombies()">
<h1> {{bookname}} <span *ngIf='bookname'>and zombies</span> </h1>

You can use a condition here.
<input type="text" [(ngModel)]="bookname" onclick="zombies()">
<h1 *ngIf="bookname"> {{bookname}} and zombies</h1>
Or if you want to use javascript:
<input type="text" ng-model="bookname" onclick="zombies()">
<h1 id="txtheading"></h1>
function zombies() {
var heading_value = document.getElementById("txtheading").value;
document.getElementById("txtheading").innerHTML = heading_value + " and zombies";
};

Easiest Solution you don't need onclick function ng-model will work itself.
AngularJs:
<input type="text" ng-model="bookname">
<h1>{{(bookname)? bookname+' and zombies' : bookname}}</h1>
Angular 2/4/5/6:
<input type="text" [(ngModel)]="bookname">
<h1>{{(bookname)? bookname+' and zombies' : bookname}}</h1>

sending user input to div

Hello I am here with a quick question on sending user input to a div section of an html document. I asked this question earlier and it seemed to be too broad so I'm going to try to be more specific this time.
I am attempting to send a user input to the div onclick of the send button but every time the code is simply changing the text rather than printing the next text under it. I'm curious what I'm doing wrong with this. Thanks for reading and here's my code.
<div id="out"</div>
<input type="text" name="textIn" id="txtin">
<input type="button" value="Hit me" onclick="hello()"></input>
<script>
function hello() {
document.getElementById("out").innerHTML =
document.getElementById('txtin').value + "<br />"
}
</script>
https://jsfiddle.net/su0o83hj/1/

If you want to append to the existing text, use += instead of = in the function:
function hello() {
document.getElementById("out").innerHTML +=
document.getElementById('txtin').value + "<br />"
}

You have some syntax errors, fix it and it will works
<div id="out"></div>
<input type="text" name="textIn" id="txtin" />
<input type="button" value="Hit me" onclick="hello()" />
<script>
function hello() {
document.getElementById("out").innerHTML +=
document.getElementById('txtin').value + "<br />"
}
</script>

You can use Element.insertAdjacentHTML() passing the first parameter beforeend:
var out = document.getElementById('out'),
txtin = document.getElementById('txtin');
function hello() {
out.insertAdjacentHTML('beforeend', txtin.value + '<br>');
}
<div id="out"></div>
<input type="text" name="textIn" id="txtin">
<input type="button" value="Hit me" onclick="hello()">

getElementById doesn't work at all

<form id="form1">
Title: <input type="text" id="title1" size="25"/><br/><br/><br/>
Description <input type="text" id="desc1" size="55"/><br/><br/><br/>
<input type="submit" value="Submit" onclick="doit();"/>
</form>
<script type="text/javascript">
function doit(){
var title = document.getElementById("title1").value;
var description = document.getElementById("desc1").value;
document.write("<h3>Title: " + title + "</h3>");
document.write("<h3>Description: " + description + "</h3>");
}
</script>
I need help with getElementById. My script takes the values the user typed in textboxes and when the user clicks submit the values are written to the page using document.write, however the code doesn't work as it expected.
<script type="text/javascript">
function doit() {
document.write("Do it function");
var title = document.getElementById("title1").value;
var description = document.getElementById("desc1").value;
document.write("<h3>Title: " + title + "</h3>");
document.write("<h3>Description: " + description + "</h3>");
}
</script>
The execution doesn't even reach the first line of the function. In the button I have:
<input type="submit value="submit" onclick="doit();"/>

If:
<input type="submit value="submit" onclick="doit();"/>
is indeed what you have, you're missing a quote (as should be evident by the syntax coloring, reason enough to make sure you use an editor that provides such coloring).
It should instead be:
<input type="submit" value="submit" onclick="doit();"/>
You should also be aware that document.write(), if the document has already been closed, will automatically open and clear the document, so your first write may make the controls with those IDs disappear, depending on the structure of your HTML.

Kindly change your html like this
<input type="submit" value="submit" onclick="doit();"/>

CKeditor with multible dynamic textareas

I have a forms which allows multiple steps to be submitted. When a user clicks "add step" another textarea appears. I am using CKeditor. It works great of the first iteration, but on all subsequent ones, it shows a standard text area. Here is my code:
<form method="post" action="process_project.php">
<b>Steps for your project:</b>
<div> </div>
Step 1
<div id="divWho">
<textarea name="projSteps[]" class="steps" id="1" rows="10" cols="60"></textarea>
</div>
<div> </div>
<input type="button" value="Add project step" onClick="addTextArea();">
<input type="submit" name="submit" value="submit" />
</form>
<script type="text/javascript">
var counter = 1;
var limit = 11;
function addTextArea() {
if (counter == limit-1) {
alert("You have reached the limit of adding " + counter + " project steps");
return false;
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Step " + (counter + 1) + " <br><textarea name='projSteps[]' id=counter rows='10' cols='60'>";
document.getElementById('divWho').appendChild(newdiv);
counter++
return true;
}
}
</script>
<script> CKEDITOR.replace('1');</script>
How can I make each new dynamically created text areas also use CKeditor? I have been working on this for hours and I am stumped.

I think you need to move CKEDITOR.replace('1'); inside the addTextArea() method enclosed in the else block before the return statement.
And also if you hard code the replace parameter to '1', it will only convert the first instance of textarea with id 1 to CKEditor and ignore others. Generate an Id dynamically and pass it to repalce method. Something like below,
var step = 'step'+counter;
div = <textarea name='projSteps[]' id=step rows='10' cols='60'>;
CKEDITOR.replace(step);
I haven't written the second step completely, I guess you can modify it as you need.
I'm working on a similar functionality and this approach works for me.

use like this.
<textarea class="ckeditor" name="abc1"</textarea>
and in JS add this
CKEDITOR.replaceAll( 'ckeditor' );
I hope it will work for all the textareas.