I am trying to create a button where when clicked, will change text previously displayed to something different. I have created a testing code but am unable to figure it out. I was wondering if someone could help? I'm required to use Javascript. Although this code displays the time when clicked, I need it to display text when clicked. I do not know how to modify this code to suit my needs
I have added internal commentary where i need help.
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()">Test</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =;
}
</script>
#need to change the code below to display text and not time
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
If you want it to display some text, add a string to your function. Something like this would work:
function myFunction() {
document.getElementById("demo").innerHTML ="Some text";
}
See it working in this JS Fiddle: https://jsfiddle.net/r22jaffb/
Hope that helps.
You will need to wrap your new content with quotation marks "". Check the snippet below. Your code should work fine now if you click on the button.
In your original code, you had assigned an onclick attribute pointing at your function to the <p id="demo"></p> itself. As a result, your function was called only if you clicked on the text itself, not on the button.
function myFunction() {
document.getElementById("demo").innerHTML = "Your new content";
}
<p id="demo">Test</p>
<button type="button" onclick="myFunction()">Click me to display my custom text</button>
Related
I'll make it quick. I researched a lot but I'm not sure why this is not working.
I have a textarea tag which I want to set to 'data-something' tag using setAttribute("data-something","") command and it works just fine if I just list it out there. However what I'm doing is I"m creating a button that when clicked sets the attribute of the textarea to 'data-something', and no matter what it fails to operate when I nest setAttribute inside a myFunction and set button onclick="myFunction()". I'd appreciate if someone could explain a workaround that.
Thanks a ton for your patience.
This is what works:
<textarea></textarea>
<script>
textarea.setAttribute("data-something","")
</script>
This is what doesn't work
<textarea></textarea>
<button onclick="myFunction()"></button>
<script>
function myFunction(){
textarea.setAttribute("data-something","")
}
</script>
You have to give you element a handle getElementById then make the change
function myFunction(){
let textarea = document.getElementById("Foo");
textarea.setAttribute("data-something","This is the set Data");
console.log(textarea);
}
<textarea id="Foo"></textarea>
<button onclick="myFunction()">Click me</button>
Hello Guys i was trying dynamic addition of text box and other controls in Classic ASP through JavaScript but encountered some problem up there.
Though i was able to add new textboxes but was no able to retain their data.
Eg : If i have a button and on click i want to add textboxes to the html page on first click a textbox is added and i enter data in that textbox like STACKOVERFLOW but when again i hit button new textbox2 is also added but textbox1 data goes away.
I changed my ASP code for simple HTML so that it will be easy. Here is the code.
<!DOCTYPE html>
<html>
<body>
<div id ='div1' style="margin-bottom:6px;"></div>
<button onclick="myFunction()">Change link</button>
<script>
function myFunction() {
var p_strContents = '<input name="cust_name_0" id="cust_name_0" value="" type="text" size="0" class="FormTextField" maxlength="6" title="">';
document.getElementById('div1').innerHTML = document.getElementById('div1').innerHTML + p_strContents ;
//document.getElementById('div1').appendChild(p_strContents);
}
</script>
</body>
</html>
I tried using even appendchild but it will throw some error.
If you want to try it directly online use this link and just paste my code will be easy for u guys to check.
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_elmnt_innerhtml
I am using JavaScript.
Could you guys help me. Regards...
Please check with this:
function myFunction() {
var textBx = document.createElement('input');
textBx.setAttribute('type', 'textbox');
textBx.setAttribute('class', 'FormTextField');
textBx.setAttribute('maxlength', '6');
document.getElementById('div1').appendChild(textBx);
textBx = null;
}
Please check working code here
I have the base page which has a button for "Add Link", upon click you get a popup window. The popup window has a form field to enter the link. Once the link is entered, I would like to refresh the base page - the base page should no more be "Add Link" but changed to the hyperlink entered in the popup window.
I am new to Javascript and html. I have by far managed to create a button on the base page and on click displays a popup window with form field for the link. However I am unable to refresh the base page with the new link.
Below is my code:
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Add Link</button>
<p id="demo"></p>
<script>
function myFunction()
{
prompt("Please Enter the Link");
}
</script>
</body>
</html>
What the following will do is every time the button is hit, the prompt is shown, and once that prompt closes the script will add a new <a href=value>New Link</a> tag to the demo div.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Add Link</button>
// This needs to be a 'div' so it can have elements inside it.
<div id="demo"></div>
<script>
var demo = document.getElementById('demo');
function myFunction()
{
// Stores the value from the prompt() in the variable 'value'
var value = prompt("Please Enter the Link");
var link = document.createElement('a'); // Create an <a> tag
link.setAttribute('href', value); // Set the link's URL to the value.
link.innerHTML = "New Link"; // Set the link's display text.
demo.appendChild(link); // Add the link to the demo div.
}
</script>
</body>
</html>
Hopefully the comments explain how it works, if not just ask here :)
Try this:
<button onclick="myFunction()">Add Link</button>
<p id="demo"></p>
<script>
function myFunction()
{
var url = prompt("Please Enter the Link");
window.location = url;
}
</script>
http://jsfiddle.net/douglasloyo/rtghQ/
the only value that is acceptable in js fiddle is going to be http://jsfiddle.net/
Cheers
You'll need some way to store the link on the server; refreshing the page will cause everything to be re-executed, and you can't really dynamically alter the html file from itself. Something like django with a postgresql database is pretty easy to set up, but that's beyond the scope of your question.
That said, if you're okay with having the link not survive when the page is refreshed, you can use a text area instead of a prompt. Here's an example if you have jQuery:
<head>
<script>
$(function() {
$("#addLink").click(function() {
var linkStr = document.getElementById("linkInput").value;
$("#linkArea").html("Your link");
});
})
</script>
</head>
<span id="linkArea">
<input id="addLink" type="submit" value="Add Link: ">
<input id="linkInput" type="text" value="(enter link)">
</span>
Here's a jsfiddle to try it out:
http://jsfiddle.net/tRcUp/
Oh, and generally you should put scripts in the head tag.
so far I have this jsfiddle
<p>Click the button to remove http:// and www. from input box belove below:</p>
<textarea id="demo" name="comments" cols="25" rows="5">
http://www.google.com
</textarea><br>
<input type="submit" value="Submit" button onclick="myFunction(),myFunction2()" />
</form>
<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace("http://","");
document.getElementById("demo").innerHTML=n;
}
function myFunction2()
{
var str=document.getElementById("demo").innerHTML;
var m=str.replace("www.","");
document.getElementById("demo").innerHTML=m;
}
</script>
It works fine with the text pre input but it will not change submitted text.
I'm sure there's a simple answer, I'm just new to this and cannot work it out or find an answer.
You need to use .value of the textarea, not .innerHTML.
.innerHTML only looks at the generated HTML in an element. If the user types in something new, the source doesn't change.
But, the value does:
document.getElementById("demo").value = ...
Fixed in your fiddle:
http://jsfiddle.net/AbSh2/12/
A couple other pointers:
You don't need two functions to do that operation, as you can see it can be done in one.
You could use type='button' instead of a submit, since Javascript doesn't care about form submits (that only matters on the server, which receives POST and GET data. Javascript can't)
You can streamline your function even further without saving strings all over the place:
function myFunction() {
var str=document.getElementById("demo").value;
var n=str.replace("http://","");
var m=n.replace("www.","");
document.getElementById("demo").value=m;
}
works fine. You could even do
function myFunction() {
document.getElementById("demo").value =
document.getElementById("demo").value.replace("http://","").replace("www.","");
}
but that gets a little jumbled IMO, so should be for learning purposes only :)
i wrote a web page that included some stuff. There, i need to create a input text box after clicking on a button, but it will be at the bottom due to existing stuff and i can't see the input box as it is in the out of visible area.there i'v to scroll down to find that.I tried with focus method , it focuses to the input box, it is unable to take the input box to visible area.in the top , i'v some javascript stuff .so i need to do this without refreshing.Here is the code snippet i'v tried.
<script>
function create(){
var inputBox=document.createElement('input');
inputBox.setAttribute('id','myInput');
var body=document.getElementsByTagName('body')[0];
body.appendChild(inputBox);
document.getElementById('myInput').focus();
}
</script>
<body>
<button onclick="create()">Click me</button>
</body>
Can anyone help me !
Yes, you are inserting the text input as the last element in body. If you want it to appear at a specific place, create a placeholder for it. For instance:
<script>
function create(){
var inputBox=document.createElement('input');
inputBox.setAttribute('id','myInput');
var wrapper=document.getElementById('wrapper');
wrapper.appendChild(inputBox);
inputBox.focus();
}
</script>
<body>
<button onclick="create()">Click me</button>
<div id="wrapper"></div>
</body>
You need a anker:
<a name="button"></a>
<button onclick="create()">Click me</button>
Then you can jump to it
location.href = 'http://yourpage#button'
The page will not reload if you jump to an anker on the same page.
Well you can always have the input in the HTML markup , and make it visible when clicking the button .
Also replacing the
body.appendChild
with
body.insertBefore(inputBox,body.firstChild);
should do what you want .