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 .
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>
i need to append a child control to html element using javascript, the problem is that the child is appear when call the function and disappear directely the child must be in a form tag
this is the code when i append child to the html elemet
<html>
<body>
<form >
<button onclick="create()">Create Heading</button>
</form>
<script>
function create() {
var h1 = document.createElement('h1');
h1.textContent = "New Heading!!!";
h1.setAttribute('class', 'note');
document.body.appendChild(h1);
}
</script>
</body>
</html>
the element h1 is added to the layout appear and disappear immediately but when i remove the <form> it works perfectly
It looks like the form element is submitting when you press the button, refreshing the page and making the header disappear.
You should probably ask yourself: should I really need a form? Are there some inputs that should be handled by the server?
If you really need it, then you can try to prevent the form from submitting
Also, as pointed out in this SO Question you can prevent the button to submit the form by specifying its type as 'button'.
Agreeing with #Drago96 Form submits and page refreshes.
What is the point of the form. if you are only appending an element
<body>
<button onclick="create()">Create Heading</button>
<script>
function create() {
var h1 = document.createElement('h1');
h1.textContent = "New Heading!!!";
h1.setAttribute('class', 'note');
document.body.appendChild(h1);
}
</script>
</body>
</html>
Say I have a page a.php and want to get a table element using it's id from another page b.php. Know it have been asked but only answers were in Jquery, any way of doing it with pure js?
Thanks!
If you mean accessing data from another tab/window, that is possible via acquiring a reference to it. For example if you open it yourself:
<html>
<head>
<script>
var otherdoc;
function create(){
otherdoc=window.open("about:blank","otherwindow").document;
otherdoc.open();
otherdoc.write("<table border='1'><tr><td id='data'>aaa</td><td>ccc</td></tr></table>");
otherdoc.close();
}
function check(){
alert(otherdoc.getElementById('data').innerHTML);
}
function modify(){
otherdoc.getElementById('data').innerHTML="bbb";
}
</script>
</head>
<body>
<button onclick="create()">Create</button>
<button onclick="check()">Check</button>
<button onclick="modify()">Modify</button>
</body>
</html>
When you click on the first button, the window.open line opens a new window/tab, and a reference to its document is kept. "about:blank" could be an actual URL - here instead a table is written there manually.
The other two buttons access and modify a cell in the table.
Suggested sequence for pushing the buttons: Create, Check, Modify, Check.
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>
I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?
First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>
Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}