This is my jsfiddle(http://jsfiddle.net/mZGsp/). I was trying to answer a question here but my code won't work. Here is the code:
JS
var stateOfClick = null;
function initiateLine(){
document.getElementById('test').innerHtml = "Started";
}
function endLine(){
document.getElementById('test').innerHtml = "Line Ended";
}
function createLines(){
if(!stateOfClick) {
initiateLine();
stateOfClick = 1;
} else {
endLine();
}
}
HTML
<body>
<input type="text" id="test" onclick="createlines()">
</body>
A couple of things,
change createlines() to createLines (camel-case).
change <element>.innerHtml to <element>.value
Inside JSFiddle, don't wrap your code inside a function, as then createLines won't be global which it needs to be for the onclick to work.
Here's a working example.
Not even this simple example will work on jsFiddle. You need to attach the event listener with JavaScript:
document.getElementById("someElement").onclick = function() {
//Do stuff
}
For input element you must use the value attribute not the innerHTML field.
function initiateLine(){
document.getElementById('test').value = "Started";
}
also you've misspelled the innerHTML function (though not the primary problem). innerHTML is used for html elements that can contain other elements such as a div containg a p element. Input and option elements all have a value attribute that can be used to extract or set their values.
Related
This is what I've done so far - but I also need to handle and empty comment, clear the field after submission and post multiple comments. Don't want answers really - just hints as to where I need to look and if I'm completely off base.
function registerClickHandler() {
var commentButton = document.getElementByID('postComment');
commentButton.onclick = addComment();
}
function addComment() {
var list = document.getElementByID('commentList');
var commentContent = document.getElementByID('comment')
var newComment = document.createElement('li');
newComment.appendChild(document.createTextNode(commentContent));
list.appendChild(newComment);
}
<ul id='commentList'>
</ul>
<form>
<input type='text' id='comment'/>
<input type='button' id='postComment' value='Post'/>
</form>
Take a look to this code working example, basically you have syntax error:
change all ocurrencies of getElementByID for getElementById
document.getElementByID('postComment');
for
document.getElementById('postComment');
And call the function which define the click handler
registerClickHandler();
Get the value for the element
var commentContent = document.getElementById('comment').value;
Some hints:
There's no getElementByID function, only getElementById, because javascript is case-sensitive.
commentButton.onclick = addComment(); is wrong because you call addComment function instead of assigning it as an event-handler to the onclick event. You should remove the parentheses commentButton.onclick = addComment;.
Use document.getElementById('comment').value; to get or set the value of your text input.
Using JQuery event handlers I want to adjust the default value of a HTML text input and set it to empty.
The input
<button id="setColor">Set Color</button>
<input type="text" id="colorText">
The function
$("#setColor").on("click", function ()
{
document.getElementById('#colorText').defaultValue = "";
});
I have also tried
$("#colorText").defaultValue = "";
$("#colorText").val = "";
$("#colorText").value = "";
but every time I click the SetColor button it seems to keep its previously set default value.
document.getElementById('colorText').defaultValue = "#0000ff";
Your question is not cleared to me, But i got a simple mistake in your code, you write extra # in getElementById
try this:
$("#setColor").on("click", function ()
{
document.getElementById('colorText').value = "";
});
Are you trying to reset the textbox color or want to reset the value?
document.getElementById('colorText').value = '';
$("#colorText").val("");
You can try this with jquery.
I'm not good at scripting and did the following by some trial and error. It seems to be working, but I wonder if it's the right way to reset the text field if there's a value:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reset</title>
<style>
</style>
</head>
<body>
<input type="text" id="box">
<input type="button" value="Reset" onclick="zero();">
<script>
var box = document.getElementById('box');
function zero() {
if (box.value && confirm('Sure?')) {
box.value = '';
alert('Done!');
}
}
</script>
</body>
</html>
Let me outline some problems in your code - you stated you are looking for the right way.
You are using the outdated inline event model (putting Javascript into HTML attributes), which has several drawbacks. You said you are not good in scripting. If you want to learn it, you could learn it the right way, you have nothing to lose. I suggest using addEventListener.
You could make your function reusable. In its current state, it is only useful to reset a very specific input element, and this is not really what functions are for.
I created a quick little example, for illustration.
In the HTML I removed the inline onclick. I added an id for the button to be able to reference it, and added a data-reset attribute (HTML5 data- attributes), in which we can store the id for the element the button will reset:
<input type="text" id="box">
<input id="reset-button" type="button" value="Reset" data-reset="box" />
And here comes the new JS, commented:
//get the reset button from the DOM
var resetButton = document.getElementById('reset-button');
//add a click event listener to it, our reset function will handle the event
resetButton.addEventListener('click', reset);
//and the reset function
function reset() {
//`this` refers to the clicked button - we query the data- attribute
var inputId = this.getAttribute('data-reset');
//get the right input element
var input = document.getElementById(inputId);
//and then what you already had
if (input.value && confirm('Sure?')) {
input.value = '';
alert('Done!');
}
}
Working demo
Now the code uses the modern event model, and the function is reusable on any other button or for a different text field - you just have to change the data- attribute.
I don't say this is the very very best way, but I wanted to keep it easy and understandable.
function zero() {
var box = document.getElementById('box');
if (box.value && confirm('Sure?')) {
box.value = '';
alert('Done!');
}
}
Your code is fine, with the only exception of moving the box variable into the function scope (instead of global scope) if you only need to reference it there (better memory management as it will be collected as garbage when the function is done executing).
You are getting the input value outside of the function which is wrong.
function zero() {
var box = document.getElementById('box');
if (box.value != ""){
if(confirm('Sure?')){
box.value = '';
alert('Done!');
}
}
}
Demo
How can i remove the style class applied to a textbox on the click event? I'm calling the textbox element using getElementsByName(). Here's my code:
<input id="userNameExists" name="popUpText" class="pop-upText" onclick="clearText(this);" />
function clearText(element)
{
id = element.getAttribute("id");
var textElement = document.getElementById(id);
textElement.value = "";
var element = document.getElementsByName("popUpText");
var count = 0;
for (count = 0; count < 2; count++) {
var id = element.item(count);
id.classname = "";
}
}
In the above script, im not getting the id in the variable id. Right now the values are like "#inputTextBoxName". Please help.
you can use removeClass();
you can manege your styling using attr();
exp:
$("#yourid").attr("style","float: right");
or remove class using
$("#yourid").removeClass("yourClass");
It is case sensitive so
id.className = '';
If you're trying to remove the class from the textbox when you click on the textbox itself, that code is far, far longer than it needs to be.
HTML:
<input type="text" id="userNameExists" name="popUpText" class="pop-upText" onclick="clearText(this);" />
Javascript:
<script>
function clearText(element) {
element.className = '';
element.value = '';
}
</script>
That said, inline event handlers (ie. declaring an onclick attribute on your HTML element) are a bad practice to get into.
Also, if you pass in a reference to an element, get its id, then call document.getElementById() with said id, you end up with two references to the same element. Yes, it should work, but totally pointless.
I have a table cell and I would like to know if it has a text box inside or simply the span tag in it dynamically using javascrip?
If you want to check whether there's an <input> anywhere inside an element, you could use getElementsByTagName():
if (myTableCell.getElementsByTagName('input').length>=1) {
...do something with the input...
}
You can check the tagName attribute
function isInput(el){
return /input/i.test(el.tagName);
}
or more generic:
function isElType(el,tagname){
return RegExp(tagname,'i').test(el.tagName);
}
//usage
var isInput = isElType(myElement,'input');
Maybe something similar to this:
cell = document.getElementById('tableCell_ID');
spans = cell.getElementsByTagName( "span" );