I have this: <input type="button" value="hello"> I want to change the value with javascript so that it is value="goodbye". How do I do this?
Following #David's advice in the comments below here is the code I tried but could not get to work before posting this question:
var createBttn = document.getElementById('create');
createBttn.innerHTML = 'value="goodbye"';
First you need to get a reference to the object that you want to change the value on, then assign the value property of that element, like this:
Say your element had an id of "someButton":
var btn = document.getElementById('someButton');
btn.value = 'goodbye';
Related
I am attempting to create a simple math quiz application for a child with on screen number keys that will append to an input field for the answer. I want to use jQuery event listener linked to a class so I do not have to call an onClick function for each number. I found this question elsewhere but I am unable to comment to further ask issue I am having as I have just joined stacked overflow and it states my reputation isn't high enough.
Link to other question: append value to an input field in JQuery
When I attempt to append I get an undefined when I attempt to click my buttons and I cannot see where the error in my code is. Any assistance would be greatly appreciated.
My jQuery:
$(".userIn").click(function() {
var usrIn = $(this).data('usrIn');
$("#answer").val(function() {
return this.value + usrIn;
});
});
Sample of my buttons:
<button type="button" class="btn btn-primary btn-block userIn" data-number="0" id="zero">0</button>
Here is the JSfiddle with all my linked style sheets and external js.
Change var usrIn = $(this).data('usrIn'); to var usrIn = $(this).attr('data-number');
Fiddle: https://jsfiddle.net/969r1gp0/4/
Your data attribute is called data-number, not data-userin, so you should write:
var usrIn = $(this).data('number')
But as the text of the buttons really is what you want to add, you could do without the data attributes all together, and just do:
var usrIn = $(this).text();
try this both, it's working
document.getElementById("input_id").value = you_value;
document.getElementById("input_id").textContent = you_value;
I have an editable DataTabe and when edit mode, the generated html is exactly as shown below:
<td><form><input autocomplete="off" name="value" ></form></td>
There is s TextBox as input and I need t get the value of this input. However, I cannot give id as there is no configuration of DataTable and I decided to get the value using Javaascipt. I have tried many different methods like closest() as shown below, but cannot get the value. Is it possible to grab it?
var $row = $(this).closest("tr");
$tds = $row.find("td");
You might use document.querySelector:
var input = document.querySelector('[name="value"]`);
Or, using jQuery, you could also use the same selector:
var input = $('[name="value"]');
var currentInput=null;
$("input").focus(function(e)
{
currentInput=e.target or this;//here you can get currently editing textfeild or may be $(this) if this is wrong
});
then you can get currentInput.value()
I see you are using jQuery; you can target the name attribute directly and to get a value of the input use .val(), like so:
$("input[name='value']").val();
I am aiming to add a button to the screen through the click of another button.
I can successfully add them but they are blank (i.e, No text).
I tried setting the value with this technique:
addButton.setAttribute("value", "Click Me");
This failed, the strange thing is I was able to successfully set the
elements ID with the setAttribute function.
I then tried the following:
var x = document.getElementById("buttonId");
x.value="Click Me";
The above caused the button not to add at all.
Maybe I'm missing something but I can't think why the first method
wouldn't work.
Note: These buttons are all created on the fly so the standard:
<input type="button" value="click me"/>
won't suffice.
Any help appreciated.
function addButton(elementId, value, name, type) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.type = type;
element.value = value; // Really? You want the default value to be the type string?
element.name = name; // And the name too?
var foo = document.getElementById(elementId);
//Append the element in page (in span).
foo.appendChild(element);
}
Try this.
Example fiddle: http://jsfiddle.net/kailashyadav/4Q8Fd/
Here is the code for a button, associated jsfiddle:
$('#createButton').on('click', function () {
var button = document.createElement('button');
button.innerHTML = 'hello';
button.setAttribute('type', 'button');
$('#placeForButton').html(button);
});
Note I set the innerHTML, because an input relies on a value attribute, a button relies on an open and closing HTML attribute. Therefore, the value in between the tags is what sets the button text. This translates into innerHTML.
I only used JQuery to bind an event to the button click.
I'm struggling to use jquery to identify the button i'm clicking.
I've a dynamically generated list categories along with a Remove button to delete it from the database.
My inputs are like this:
<input id="deletesector" class="deletesector" type="submit" name="deletesector-4" value="Remove"></input>
<input id="deletesector" class="deletesector" type="submit" name="deletesector-5" value="Remove"></input>
<input id="deletesector" class="deletesector" type="submit" name="deletesector-6" value="Remove"></input>
my script listens for a .deletesector click and then get the attr name. however, it returns the name of deletesector-4 no matter which of the 3 buttons is clicked.
How do I fix this so that if "deletesector-5" is clicked it identifies it as such.
$(".deletesector").click(function() {
//store the id
var name = $("input#deletesector").attr('name');
//create the post variable string
var dataString = 'serviceid='+ name;
alert (dataString);
Use this inside the anonymous function for the click-handler:
$(".deletesector").click(function(){
var name = this.name
});
The reason you always got the name of deleteselector4 is because that's the first (but not the only) element with the id of deleteselector, an id must be unique for HTML to be valid. With that in mind id selectors only ever look for one element when they search by id, and stop at that first element, assuming it's the only element with that id (as it should be).
Given that the id in your HTML is the same as the class, remove the id since it's doing nothing useful, and actively harming your HTML's validity.
References:
Element identifiers: the id and class attributes.
Use:
$(".deletesector").click(function(){
var name = $(this).attr('name');
// your stuff here
});
this in a jQuery event refers to the element that was clicked on.
Also, your duplicate ids will mess stuff up.
See this JSFiddle for a working example.
First of all, you have some duplicated ids.
Here is the fixed code:
<input id="deletesector-4" class="deletesector" type="submit" name="deletesector-4" value="Remove"></input>
<input id="deletesector-5" class="deletesector" type="submit" name="deletesector-5" value="Remove"></input>
<input id="deletesector-6" class="deletesector" type="submit" name="deletesector-6" value="Remove"></input>
Then you jQuery could be like this:
$(".deletesector").click(function(ev) {
// CHECK THIS $(ev.target) element, very useful!
elementClicked = $(ev.target);
var name = elementClicked.attr('name');
var dataString = 'serviceid='+ name;
alert (dataString);
});
Here is a JSFiddle that shows your example working.
Im trying to create such element only with JS:
<input type="text" value="default">
To do so, I tried this code:
var mi = document.createElement("input");
mi.type= "text"
mi.value = "default"
But when I run it in Chrome Dev Tools, it only creates this element:
<input type="text">
What am I missing?
Setting a property of a HTMLElement isn't exactly the same as setting it's attribute to the same thing.
You most likely wanted to use element.setAttribute
var mi = document.createElement("input");
mi.setAttribute('type', 'text');
mi.setAttribute('value', 'default');
Now you can see
new XMLSerializer().serializeToString(mi);
// "<input type="text" value="default">"
In your example, the value displayed by the <input> will still be default, it just isn't set as the attribute.
Further note that if the user changes the value of <input>, e.g. types into it, setting the attribute will not change the value any longer, but setting the value property will still change it. Again, this is because an attribute is different to a property.
var i = document.createElement("input"); //input element, text
i.setAttribute('type',"text");
i.setAttribute('name',"username");
i.setAttribute('value',"default");
I think you are missing the ; after "text".