it changes for about a second and returns to the previous text.The "Loading..." line has to change into "hi, Please click the next text box to see more instructions!".
I have tried it latest chrome and Edge browsers.
function greetMe() {
var yourName = document.getElementById("textbox").value;
info1 = "hi, Please click the next text box to see more instructions!"
document.getElementById("textToChange").innerHTML = info1
}
#myForm {
float: left;
width: 30%
}
#myformInfo {
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>HEllO ThERE!</h1>
<div id="myForm"><form >
<input id="textbox" placeholder="Your name">
<button onclick="greetMe()">click!</button>
<br><br>
<input id="">
</div></form>
<div id="myFormSteps">
<p id="textToChange">
<script>var info1 = "Loading..."
document.write(info1)
</script>
</p>
</div>
</body>
</html>
It's probably because you haven't set the type attribute for your button. A button's default type is submit. Try adding the attribute type="button" to your <button>.
When you click the button your form is submitting and the page is reloading - that's why it returning to its initial state. To stop this happening pass in event as a parameter to the function and then use that argument in the function with preventDefault():
HTML
<button onclick="greetMe(event);">click!</button>
JS
function greetMe(e) {
e.preventDefault();
// ...
}
As an aside it's better is to remove your inline JS and use an event listener instead.
var button = document.querySelector('button');
button.addEventListener('click', greetMe, false);
Related
I got a problem in updating the value within <textarea> tags. The procedure is like this, there is an initial value inside textarea, then the user changes it. If I want to use a js script (implemented by a button) to modify the value further, it does not work at all. However, if we do nothing on the textarea, the button works perfectly. So weird to me. Could anyone shed any light on this? The code is posted below.
$(document).ready(function() {
$("#mybutton").click(function() {
var mystring = "The previous textarea value is <br><em>" + $("#myarea").val() + "</em>";
$("#myarea").html("Star wars"); // this line doesn't work after editting the textarea but works if you do not edit anything, why?
$("#placeholder").html(mystring);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div>Input whatever you want</div>
<textarea id="myarea" style="width: 300px; height: 70px">Initial text</textarea>
<div>
<button id="mybutton">Click after editing</button>
<br> The button is supposed to change the text to <em>Star wars</em>.
</div>
<div id="placeholder"></div>
</body>
$(document).ready(function() {
$("#mybutton").click(function() {
var mystring = "The previous textarea value is <br><em>" + $("#myarea").val() + "</em>";
$("#myarea").val("Star wars"); //The changes have to be made on this line
$("#placeholder").html(mystring);
});
});
Inorder to change the value of textarea use val() , instead of html().
I was wondering if I can create a text input where users can type some text and then immediately display them on page, same as twitter. I know about alert window or prompt window but I need something different, a text input on website.
Hope it can be done in JavaScript.
Use .keyup() for the input field then replace the content of the output div.
$(".div-input").keyup(function() {
$(".output").html($(this).val());
});
.output {
margin-top: 20px;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="div-input" />
<div class="output">
</div>
If you want to display the input on submit, you could attach a .submit() event on a form tag then use appendTo on the div if you want to insert multiple elements;
$(".form-input").submit(function(e) {
e.preventDefault();
var value = $(".div-input").val();
$("<div class='outputs'>" + value + "</div>").appendTo($(".output"));
});
.output {
margin-top: 20px;
}
.outputs {
padding: 20px;
font-size: 2em;
border: 1px solid black;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-input">
<input class="div-input">
<button type="submit">Submit</button>
</form>
<div class="output"></div>
you can use this to show your text anywhere on page
<input id="input-name" oninput="outputname.value = this.value">
<output id="outputname" name="outputname" for="input-name"></output>
You can test it here
If you add an eventlistener to the input, you can use that to change the text in your output area on the page. Like this:
const input = document.getElementById('input');
const output = document.getElementById('output');
input.addEventListener('input', (e) => {
output.innerHTML = input.value;
});
<div id="output"></div>
<input type="text" id="input">
HTML:
<p>Input:</p><input id="input" type="text">
<p>Output:<span id="output"></span></p>
Javascript:
// Function To Select Element
function $(element) {
return document.querySelector(element);
}
// We will get the input when calling this function
function getInput() {
return $('#input').value;
}
// The output will be displayed
function output() {
$('#output').innerHTML = getInput();
}
// This function will start our code
function init() {
output();
}
// On keyup our code will initiate
$('#input').addEventListener('keyup', init);
You can test it here: https://codepen.io/anon/pen/ReyGaO?editors=1111
People are downvoting you because this can be done with very basic JavaScript, and questions like this are very unusual because anyone doing a basic JavaScipt course will probably be able to do this.
Theoretically speaking: you can put an input element and a button on the html page, plus an empty div. You can set an event for the button or even for the input for live updating while typing, and write an event handler function to change the content of the empty div. You can either set its content or add a new child to it, so that the previous content still remains.
Practical example: (The code below is live at https://codepen.io/bradib0y/pen/YJLGrb )
<!DOCTYPE html>
<html>
<body>
<p>Click the button to add a new post.</p>
<input id="NewPostField" type="text" value="Some text">
<button onclick="myFunction()">Add new post</button>
<div id="Posts"></div>
<script>
function myFunction() {
var NewPostField = document.getElementById("NewPostField");
var newPost = document.createElement("p");
newPost.innerHTML = NewPostField.value;
var Posts = document.getElementById("Posts");
Posts.appendChild(newPost);
}
</script>
</body>
</html>
you can do it by this
<input id="mainInput" oninput="output.value = this.value">
<output id="output" name="output" for="input-name"></output>
click here to view in jsFiddle
I have a very simple code: I want to cancel a button after it's clicked to display something else. I tried this way
HTML:
<div id="container">
<input type="button" value="New game" onclick="newGame()" />
</div>
js:
function newGame() {
var container = document.getElementById("container");
container.removeChild(container.childNodes[0]);
}
What happens is the button gets cancelled only if I click it two times. Where did I get wrong?
I'm sorry if this is a repost, I tried to check but didn't find a quetion identical to mine
It appears as if your code is going to remove the button once you click on it. Is this correct, or are we not looking at the full markup?
If you remove \n (i.e new line) your code will work
try like this
function newGame() {
var container = document.getElementById("container");
debugger;
container.removeChild(container.childNodes[0]);
}
<div id="container"><input type="button" value="New game" onclick="newGame()" /></div>
The reason why your code is not working is, when you hit enter after div, HTML DOM will automatically creates one dummy text node as it's child. hence your input node became the second child for your container.
Working fiddle
Hope it helps :)
try this:
function newGame() {
var container = document.getElementById("container");
// change 0 to 1
container.removeChild(container.childNodes[1]);
}
container.childNodes[0] is a text Node, in which the text is Newline
I gave id to the button and removed it using id.
In your case it is not removing in first time because container.childNodes[0] in first time is not a button. Try your self using console.log in your function.
function newGame() {
var container = document.getElementById("container");
var d_nested = document.getElementById("button_1");
var throwawayNode = container.removeChild(d_nested);
//container.innerHTML='';
}
<div id="container">
<input id="button_1" type="button" value="New game" onclick="newGame()" />
</div>
Alternatively, you could do this:
<div id="container">
<input type="button" value="New game" onclick="document.getElementById('container').removeChild(this);" />
No separate JS file needed.
I want to type in text in a text field, press a button, and the text of a paragraph will change. What would I need to do for this to happen and is there an easier way to do it other than javascript?
Since I didn't know what I needed to do, here's the code I originally had:
<html>
<head>
<title>Moving Text</title>
<link rel="stylesheet" type="text/css" href="stlye.css">
</head>
<body>
<div id="text">
<p id="new">new text</p>
Main News:<input type="text" name="update"><br>
<input type="button" value="Update" onClick="update();">
<script type="text/javascript">
function update(){
document.getElementById('new').innerHTML = 'Update';
}
</script>
</div>
</body>
I'm pretty sure it's wrong or way off. Any suggestions?
HTML:
<p id="your_paragraph">This text will change, after clicking the button.</p>
Main News: <input type="text" id="theText" />
<input type="button" id="btn" value="Update" />
JavaScript:
var p = document.getElementById('your_paragraph');
var btn = document.getElementById('btn');
var txt = document.getElementById('theText');
btn.onclick = function(){
p.textContent = txt.value;
};
http://jsfiddle.net/3uBKC/
No, you'll need to use javascript. Without an example of your markup nobody will be able to provide you a specific example, but here's a general one using the jQuery library.
// get the textarea, watch for change, paste, and keyup events
$('textarea').on('change paste keyup', function(){
// Store the text field as a variable, get it's value
var thiis = $(this),
value = thiis.val();
// replace the paragraph's content with the textrea's value
$('p').html(value);
});
When a user puts in some text into my form and clicks the button, I want to hide the form and show a "thanks" message to the user to let them know I got their text.
By the way, this is for embedding into a Chrome extension pop-up.
Here's what I have:
<!doctype html>
<html>
<head>
<title>Extension</title>
<style>
body {
min-width:200px;
min-height:75px;
overflow-x:hidden;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
.visible{
display:block;
}
.invisible{
display: none;
}
</style>
<script>
var PopupController = function () {
this.button_ = document.getElementById('button');
this.form_ = document.getElementById('userIdForm');
this.userId_ = document.getElementsByName('userID')[0];
this.submitThanks_ = document.getElementById('submitThanks');
this.addListeners_();
};
PopupController.prototype = {
button_: null,
form_: null,
userId_: null,
submitThanks_: null,
addListeners_: function () {
this.button_.addEventListener('click', this.handleClick_.bind(this));
},
handleClick_: function () {
console.log("Submit button clicked");
var userId = this.userId_.value;
// Hide the form
this.form_.classList.add('invisible');
this.submitThanks_.classList.remove('invisible');
}
};
</script>
</head>
<body onload="window.controller = new PopupController()">
<h2 class="invisible" id="submitThanks">Thanks!</h2>
<div id="userIdForm">
<form>
<input type="text" name="userID" placeholder="User ID" required/>
<button id="button" type="submit">Submit</button>
</form>
</div>
</body>
</html>
The problem is that the form reappears after the button is clicked. I have noticed that the functionality slightly changes when I put in the required attribute into the input field.
I'm using the latest version of Chrome for Mac.
This is because your button is a "submit" button. So when you click on it, it does its standard behavior, which is to submit the form. It makes an HTTP request and your page is refreshed.
If you don't want this to happen, just change the button type to "button".
The form is reloading because the page is reloading, try returning false from your submit.
<button id="button" type="submit" onclick="return false;">Submit</button>
Edit
Ah, sorry about that. So the page isn't reloading?
Perhaps try this instead:
handleClick_: function () {
console.log("Submit button clicked");
var userId = this.userId_.value;
// Hide the form
this.form_.className = "invisible";
this.submitThanks_.className = "visible";