Change content in an div through button click - javascript

Maybe this is duplicate, i don't know
But how do i so my text input changes into text ?
<input type='text' id='input_id' />
<button id='saveName'>Save name</button>
<div id='box_id'></div>
<script>
document.getElementById('saveName').addEventListener('click', function() {
var name = document.getElementById('input_id').value;
document.getElementById('box_id').innerHTML = 'Welcome ' + name;
}, false);
</script>
So when the button is pressed the input-tag and the
button-tag changes
to the Username: text input
Almost like a login but without servers and emails etc.

Try the following code:
<input type='text' id='input_id' />
<button id='saveName' onClick="callMethod()">Save name</button>
<div id='box_id'></div>
<script>
function callMethod(){
var name = document.getElementById('input_id').value;
document.getElementById('box_id').innerHTML = 'Welcome ' + name;
}
</script>

If you want both the input and button to disappear you could add this to your JavaScript:
document.getElementById('saveName').remove();
document.getElementById('input_id').remove();
JSFiddle

It will work sure.
<script>
function callMethod(){
document.getElementById('saveName').remove();
document.getElementById('input_id').remove();
document.getElementById('box_id').innerHTML = 'Welcome '+ document.getElementById('input_id').value;
}
</script>

Try this Fiddle example
HTML
<div id="login">
<input type='text' id='input_id' />
<button id='saveName'>Save name</button>
</div>
<div id='box_id'>a</div>
CSS
#box_id {display:none; background:#ccc;}
#login, #box_id {padding:20px; background:#eee;}
JS
document.getElementById('saveName').addEventListener('click', function() {
var name = document.getElementById('input_id').value;
$('#login').hide();
document.getElementById('box_id').innerHTML = 'Welcome ' + name;
$('#box_id').css({'display': 'block' });
}, false);

It Will not required you to click or make button dissapear.
<input type='text' id='input_id' onblur="callMethod()" />
<div id='box_id'></div>
<script>
function callMethod(){
var name = document.getElementById('input_id').value;
document.getElementById('box_id').innerHTML = 'Welcome ' + name;
}
</script>

I'm not sure what you want to do. But if you want to change input tag and button tag into form: Username: text remove these elements:
<input type='text' id='input_id' />
<button id='saveName'>Save name</button>
<div id='box_id'></div>
<script>
document.getElementById('saveName').addEventListener('click', function() {
var name = document.getElementById('input_id').value;
document.getElementById('input_id').remove();
document.getElementById('saveName').remove();
document.getElementById('box_id').innerHTML = 'Welcome ' + name;
}, false);
</script>

Try this. Problem Solved, Accept if working.
<script>
function callMethod(){
var name = document.getElementById('input_id').value;
document.getElementById('box_id').innerHTML = 'Welcome ' + name;
document.getElementById('saveName').style.display="none";
document.getElementById('input_id').style.display="none";
}
</script>

Related

how to create different data id for text box which is getting on click

i want add text-boxes on each click that work well but i need add id for each text-boxes which is added dynamical. i am struggling to give id for it below i give the code used for adding textbox on click
$(function() {
$('.plusicon').on('click', function() {
var textBox = '<input type="text" class="textbox"/>';
var a = $(this).attr("id");
$('#' + a + "box").append(textBox);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />//for clickbutton//
<div id="plusicondivbox" class="insidediv " style="margin-top:-53px;"></div>//div for adding txtbox//
Have a global-variable and increment it after every click-event
$(function() {
var count = 0;
$('.plusicon').on('click', function() {
var textBox = '<input type="text" class="textbox"/>';
var a = $(this).attr("id");
$('#' + a + "box").append(textBox);
$('#' + a + "box input:last").attr('id', 'id_' + count);
++count;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<br/>
<div id="plusicondivbox" class="insidediv"></div>
Or assign inline attribute by concatenation:
$(function() {
var count = 0;
$('.plusicon').on('click', function() {
var textBox = '<input type="text" id="id_' + count + '" class="textbox"/>';
var a = $(this).attr("id");
$('#' + a + "box").append(textBox);
++count;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<br/>
<div id="plusicondivbox" class="insidediv"></div>
Use instead of $(this) $(textbox)
$(function () {
$('.plusicon').on('click', function () {
var textBox = '<input type="text" class="textbox"/>';
var a = $(textBox).attr("id","your_id");
$('#'+a+"box").append(textBox);
});
Please have a look at below code. We can define global counter which will get incremented each time you press plus button so that you will get unique number each time. that number we can use to define unique textbox id as follows:
var textBoxCounter = 1;
$(function() {
$('.plusicon').on('click', function() {
var textBox = '<input type="text" class="textbox"/>';
textBox = $(textBox);
textBox.attr("id", "myTextBox_" + textBoxCounter);
textBoxCounter++;
var a = $(this).attr("id");
$('#' + a + "box").append(textBox);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<div id="plusicondivbox" class="insidediv " style="margin-top:53px;"></div>
This code will work for you ,use global variable which will give dynamicid for your textboxes ie(different id for dynamic textboxes):
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</script>
<script>
var idCount=0;
$(function() {
$('p').on('click', function() {
var textBox = '<input type="text" class="textbox"/>';
var a = $('<input>').attr("id","textBox"+idCount);
$(textBoxDiv).append(a);
idCount++;
});
});
</script>
</head>
<body>
<p>Click !</p>
<div id="textBoxDiv" style="width:50%;height:50%">
</div>
</body>
</html>
I know this answer has already been accepted, but I dislike the option of using a global variable just to increment the count for the dynamically added id - when there is a cleaner way of doing it in the function using the length of the .textbox elements. Note that this will give a zero-indexed number for the id that is incremented each time the image is clicked, because each time a textbox is appended - the length of the .textbox class increases by 1. I have put a console.log in there to demonstrate the increasing count:
$('.plusicon').on('click', function() {
var textBox = '<input type="text" class="textbox"/>';
var textboxLength = $('.textbox').length;
$('#plusicondivbox').append(textBox);
$('.textbox:last').attr('id', 'id_' + textboxLength);
console.log('id_' + textboxLength);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="plusicondiv" class="plusicon" src="vectorimages/pluseicon.svg" />
<div id="plusicondivbox" class="insidediv " style="margin-top:53px;"></div>

How to Get and Print a String Using HTML

I have a small project that I'm working on (dealing with getting a name and printing it with a string). The problem is that when I click on the button, nothing happens.
Code:
<!DOCTYPE html>
<html>
<head>
<link type = "css" rel="stylesheet" href = "css.css"/>
<script>
var button = document.getElementById('send');
var enter = document.getElementById('enter');
button.onclick function() {
var str = 'Hello ' + enter.value + ' how are you?';
alert(str);
}
</script>
<title>HAL 9000 SIM</title>
</head>
<body>
<p id=p1> What is your name? </p>
<br><br>
<input type = "text" id="enter" name = "entername"><br>
<input type = "button" id="send" value="Enter">
</html>
It's not complete, as you can probably tell, so any other pointers are greatly needed!
It seems you forgot the "=" sign after the button.click.
Check this:
<body>
<p id=p1>What is your name?</p>
<br>
<br>
<input type="text" id="enter" name="entername">
<br>
<input type="button" id="send" value="Enter">
--
var button = document.getElementById('send');
var enter = document.getElementById('enter');
button.onclick =
function () {
if(enter.value.length > 0)
{
var str = 'Hello ' + enter.value + ' how are you?';
alert(str);
}else
{
alert("Please input the required fields!");
}
};
http://jsfiddle.net/pg5k60rz/
First of all, you didnt assign to onclick your function
var enter = document.getElementById('enter');
button.onclick = function() {
var str = 'Hello ' + enter.value + ' how are you?';
alert(str);
}
secondly if you want your code work, but script before closing body tag

Redirect url link based on login user using javascript

How to create url link based on user name(gmail).
Eg: http://www.test.com/%username%
The following code more or less suitable for me. Only i want to know how to get username automatically on the input area.
<script type="text/javascript">
function changeText(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "http://www.test.com" + userInput;
lnk.innerHTML = lnk.href;
}
</script>
Link : <a href="" id=lnk>nothing here yet</a> <br>
<input type='text' id='userInput' value='Enter username' />
<input type='button' onclick='changeText()' value='Change Link'/>
Here also same issue
<a id="reflectedlink" href="http://www.google.com/search">http://www.test.com/</a>
<input id="username"/>
<script type="text/javascript">
var link= document.getElementById('reflectedlink');
var input= document.getElementById('username');
input.onchange=input.onkeyup= function() {
link.search= '/'+encodeURIComponent(input.value);
link.firstChild.data= link.href;
};
</script>
I really didn't understand what your requirement was.But check the below fiddle if this was what you really meant.
Link : nothing here yet <br>
<input type='text' id='userInput' value='Enter username' />
<input type='button' onclick='changeText()' value='Change Link'/>
<script>
function changeText(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "http://www.test.com/" + userInput;
lnk.innerHTML = lnk.href;
}
</script>
Demo
var link= document.getElementById('reflectedlink');
var input= document.getElementById('username');
input.onchange=input.onkeyup= function() {
link.pathname= "/"+input.value;
link.firstChild.data= link.href;
};
Demo
For redirecting the user to his own page:
window.location.href = "http://test.com/"+$('#userInput').value;

onclick create html object

I want to make input type text refer to user input, if input 3 it shows 3 new input type text
I try this
<input type='text' id='how_many'><input type='button' id='add' value='add'>
<script>
function add(){
var total=$('#how_many).val();
for(var x=0;x<=total;x++){
//HOW TO ADD INPUT TYPE TEXT BELOW
}
}
</script>
Probably you are missing '
var total=parseInt($('#how_many').val());
for(var x=0;x<=total;x++){
$("#mainContainer").append("<input type='text'/>");
}
There you go:
<div class="container">
<input type='text' id='how_many' />
</div>
<input type='button' id='add' value='add' />
<script type="text/javascript">
$(document).ready(function() {
$("#add").click(function(e) {
var $el = $('#how_many'),
total = $el.val();
for (var x=0;x<=total;x++){
$(".container").append($el.val("").clone().attr("id", "total_" + x));
}
});
});
</script>
Where '.clone()' is a jQuery method which clones the DOM node, '.append()' is a jQuery method to append the newly cloned node to another node.
Remember to parse your input, then just create:
var total= parseInt($('#how_many').val());
for(var x=0;x<=total;x++){
$("yourcontainer").append("<input type='text' />");
}
Trigger the add() function on a blur
$("#how_many").blur(add);
$('#add').click(function () {
for (i=0;i<$('#how_many').val();i++) {
$(this).after('<div><input type="text" /></div>')
}
})
jsFiddle example

Javascript Error Null is not an Object

Im getting a error in the Web Inspector as shown below:
TypeError: 'null' is not an object (evaluating 'myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
return false;
}')
Here is my Code (HTML):
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>
<script src="js/script.js" type="text/javascript"></script>
<form>
<input type="text" id="myTextfield" placeholder="Type your name" />
<input type="submit" id="myButton" value="Go" />
</form>
Here is the JS:
var myButton = document.getElementById("myButton");
var myTextfield = document.getElementById("myTextfield");
function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName ("h2")[0].innerHTML = greeting;
}
myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
return false;
}
Any Idea why I am getting the error?
Put the code so it executes after the elements are defined, either with a DOM ready callback or place the source under the elements in the HTML.
document.getElementById() returns null if the element couldn't be found. Property assignment can only occur on objects. null is not an object (contrary to what typeof says).
Any JS code which executes and deals with DOM elements should execute after the DOM elements have been created. JS code is interpreted from top to down as layed out in the HTML.
So, if there is a tag before the DOM elements, the JS code within script tag will execute as the browser parses the HTML page.
So, in your case, you can put your DOM interacting code inside a function so that only function is defined but not executed.
Then you can add an event listener for document load to execute the function.
That will give you something like:
<script>
function init() {
var myButton = document.getElementById("myButton");
var myTextfield = document.getElementById("myTextfield");
myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
}
}
function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName ("h2")[0].innerHTML = greeting;
}
document.addEventListener('readystatechange', function() {
if (document.readyState === "complete") {
init();
}
});
</script>
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>
<form>
<input type="text" id="myTextfield" placeholder="Type your name" />
<input type="button" id="myButton" value="Go" />
</form>
Fiddle at - http://jsfiddle.net/poonia/qQMEg/4/
Try loading your javascript after.
Try this:
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>
<form>
<input type="text" id="myTextfield" placeholder="Type your name" />
<input type="submit" id="myButton" value="Go" />
</form>
<script src="js/script.js" type="text/javascript"></script>
I think the error because the elements are undefined ,so you need to add window.onload event which this event will defined your elements when the window is loaded.
window.addEventListener('load',Loaded,false);
function Loaded(){
var myButton = document.getElementById("myButton");
var myTextfield = document.getElementById("myTextfield");
function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName ("h2")[0].innerHTML = greeting;
}
myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
return false;
}
}
I agree with alex about making sure the DOM is loaded. I also think that the submit button will trigger a refresh.
This is what I would do
<html>
<head>
<title>webpage</title>
</head>
<script type="text/javascript">
var myButton;
var myTextfield;
function setup() {
myButton = document.getElementById("myButton");
myTextfield = document.getElementById("myTextfield");
myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
return false;
}
}
function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName("h2")[0].innerHTML = greeting;
}
</script>
<body onload="setup()">
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>
<form>
<input type="text" id="myTextfield" placeholder="Type your name" />
<input type="button" id="myButton" value="Go" />
</form>
</body>
</html>
have fun!

Categories