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>
Related
I know this question has been asked a lot, but none of the solutions to the question have worked for me. This is for a Google Chrome Extension. I am calling a javascript function in an html file like this:
<div style="text-align:center">
<input type="button" onClick="buttonClicked()" value="Activate Extension">
</div>
<script type="text\javascript" src="eventPage.js"></script>
</body>
</html>
in eventPage.js:
function buttonClicked() {
var uname = document.getElementById("uname").value;
alert("Extension activated. Enjoy!");
}
I have tried moving the html tag in the head and the body and nothing changes. Any and all help is greatly appreciated.
Changing the type should work. If not check if the external reference path is correct and all the javascript is available.
Also check if you see any errors in developer console.
Try to add some breakpoints and see if that function is being called.
It's because of this line var uname = document.getElementById("uname").value; where you are giving a variable to the button value.It is only needed when there is input type "text" where there will be text in the text box.
Your code should be following and it works fine.
<div style="text-align:center">
<input type="button" onClick="buttonClicked()" value="Activate Extension">
</div>
<script src="eventPage.js"></script>
</body>
Just remove variable line from the javascript.
function buttonClicked() {
alert("Extension activated. Enjoy!");
}
I have a form in a php loop, and if there are 3 elements in the database, there are 3 forms with same name. Those forms do contain a button with the same name. So everything likes like this:
<form id="test">
<button id="testbutton"></button>
</form>
<form id="test">
<button id="testbutton"></button>
</form>
<form id="test">
<button id="testbutton"></button>
</form>
The problem appears when I try to call .on or .click function from javascript. It works only once.
This is the JS code:
$(document).ready(function () {
$('#testbutton').on("click", function() {
function();
});
});
The button fades out certain div's which have different names.
ID's Must Be Unique, specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements.
Give your elements a class instead :
<form>
<button class="testbutton"></button>
</form>
<form>
<button class="testbutton"></button>
</form>
<form>
<button class="testbutton"></button>
</form>
Now your selector can use the class:
$('form').on("click", ".testbutton", function(){ // event will bubble up to form
please try to bind event on button type rather than id like this
$(':button').on("click", function(){
// do other stuff
});
Please check here in fiddle
I have solved my problem with this sentence:
$(this).closest("form").find("input[name=testfield]").val()
It is a bit complicated to explain the problem, but the solution is here. Button click finds the closest form and closest value of the field required. So, my problem is gone, but thanks for all the help, you have helped me to clear out some doubts! :)
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 have a web form with a text box in it. How do I go about setting focus to the text box by default?
Something like this:
<body onload='setFocusToTextBox()'>
so can anybody help me with it? I don't know how to set focus to the text box with JavaScript.
<script>
function setFocusToTextBox(){
//What to do here
}
</script>
Do this.
If your element is something like this..
<input type="text" id="mytext"/>
Your script would be
<script>
function setFocusToTextBox(){
document.getElementById("mytext").focus();
}
</script>
For what it's worth, you can use the autofocus attribute on HTML5 compatible browsers. Works even on IE as of version 10.
<input name="myinput" value="whatever" autofocus />
Usually when we focus on a textbox, we should also scroll into view
function setFocusToTextBox(){
var textbox = document.getElementById("yourtextbox");
textbox.focus();
textbox.scrollIntoView();
}
Check if it helps.
If your code is:
<input type="text" id="mytext"/>
And If you are using JQuery, You can use this too:
<script>
function setFocusToTextBox(){
$("#mytext").focus();
}
</script>
Keep in mind that you must draw the input first $(document).ready()
For plain Javascript, try the following:
window.onload = function() {
document.getElementById("TextBoxName").focus();
};
I used to just use this:
<html>
<head>
<script type="text/javascript">
function focusFieldOne() {
document.FormName.FieldName.focus();
}
</script>
</head>
<body onLoad="focusFieldOne();">
<form name="FormName">
Field <input type="text" name="FieldName">
</form>
</body>
</html>
That said, you can just use the autofocus attribute in HTML 5.
Please note: I wanted to update this old thread showing the example asked plus the newer, easier update for those still reading this. ;)
As mentioned earlier, document.forms works too.
function setFocusToTextBox( _element ) {
document.forms[ 'myFormName' ].elements[ _element ].focus();
}
setFocusToTextBox( 0 );
// sets focus on first element of the form
window.onload is to put focus initially
onblur is to put focus while you click outside of the textarea,or avoid text area
blur
<textarea id="focus"></textarea>
<script>
var mytexarea=document.getElementById("focus");
window.onload=function()
{
mytexarea.focus();
}
</script>
If your <input> or <textarea> has attribute id=mytext then use
mytext.focus();
function setFocusToTextBox() {
mytext.focus();
}
<body onload='setFocusToTextBox()'>
<form>
<input type="text" id="mytext"/>
</form>
</body>
this example worked for me
$(document).ready(function () {
document.getElementById('TextBox').focus();
}
Try This:
$('.modal').on('shown.bs.modal', function () {
setTimeout(function() {
$("input#yourFieldId").addClass('modal-primary-focus').focus();
},
500);
});
Thought of sharing some edge cases for this subject.
If your content is reloading (example dynamic DOM loading results from API and setting focus on first item of results) adding attribute autofocus will not be your solution, it works only on first load, second DOM change will not work but works fine in static DOM or single page load. If you have Dynamic component loading data simple .focus() will fail due to triggering focus on element not created yet by the time focus() is or blur not complete yet by DOM. For this case expected is to add delay time (setTimeout function) to give a time for focus to apply to new created or recreated element in DOM. My case was to load data from API and get focus on first result.
Adding var el = document.getElementById(focusId); el.focus(); solved the issue so DOM completes blur without adding delay.
<input type="text" class="word"> //html code
let theinput = document.querySelector(".word"); //Get the input
theinput.focus(); // focus on input
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 .