Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
<div class="main">
<textarea rows ="20" cols="80" name ="output_box" id ="output"></textarea>
</div>
What I want it to do is to add text to that area on a button click like so
<div class="classname" button type =onclick="myFunction()" >
Export
</div>
and this is what it calls
<script>
function myFunction()
{
var obj = document.getElementById("output").innerHTML;
var text = document.createTextNode("Test data");
obj.innerHTML = text;
}
</script>
But after much frustration I cannot figure it out.
Example with the changes below: http://jsfiddle.net/charlescarver/hZw6q/
Your JS should be closer to this:
var obj = document.getElementById("output");
var txt = "Test data";
obj.value = txt;
txt != text
As Matt Ball pointed out, "obj is a string," not an object.
You don't need document.createTextNode as you're using value instead of innerHtml
Your HTML should also be:
<div class="classname" type="button" onClick="myFunction()">
Export
</div>
And not:
<div class="classname" button type =onclick="myFunction()" >
Export
</div>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I have a html like the below,
<div id ="b1">
<div class = "test1" value = 100> </div>
</div>
I need the Value 100 to be displayed in the HTML inside the particular div.
I used the below JS code,
Var target = document.getElementById('b1');
var test = target.getElementsByClassName('test');
$(test).innerHTML = $(this).attr('value');
It didnt work.
Could someone please help?
Many thanks.
The value attribute isn't available on a <div>
Use .innerHTML to change the value of the div
HTML/Javascript change div content
Also, you can use getElementsByClassName on the document itself, no need to get the parent <div> first
Since you're only expecting 1 result, well need to select the first index of the nodelist returned by getElementsByClassName
Javascript: How to get only one element by class name?
var test = document.getElementsByClassName('test1')[0];
test.innerHTML = 100;
<div id="b1">
<div class="test1"></div>
</div>
var test= document.getElementById('b2');
test.innerHTML=test.getAttribute("value")
<div id ="b1">
<div class = "test1" id ="b2" value="100" > </div>
</div>
You have entered the wrong className, and you cannot use this because it refers to the parent object in this case (window object)
you also cannot add a data attribute to a div, you can use a special dataset attribute data-value:
<div id="b1">
<div class="test1" data-value="100"> </div>
</div>
var target = document.getElementById('b1');
var test = target.getElementsByClassName('test1')[0];
test.innerHTML = test.dataset.value;
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I need some help on editing elements which are in HTML with JavaScript. Is it possible to change the "text" with javascript? I've tried using document.getElementById but I don't think I'm doing it correctly.
Get the elemet with a query like you would use in css:
var element = document.querySelector('div.header');
Change the content using the textContent property:
element.textContent = "New Content;"
Adding image to content:
document.querySelector('div.header').innerHTML = "<img src='smiley.gif' alt='Smiley face' height='42' width='42'>";
Simple example with "press me" button that calls a function to change text
<html>
<script>
function changeText(){
document.getElementById("header").innerHTML = "changed text";
};
</script>
<body>
<div id="header">text</div>
<button onclick="changeText()">press me</button>
</body>
<html>
<script>
function changeText(){
document.getElementById("header").innerHTML = "changed text";
};
</script>
<body>
<div id="header">text</div>
<button onclick="changeText()">press me</button>
</body>
</html>
if querySelectorAll or getElementsbyClassName there are many ways to alter the text.
My answer is that you must think about your structure of the HTML Document.
You can use every ID only once. It is better to use data-lb="detail" etc. and classes for the div´s
Please see this not as an answer only as an tip.
You can try something like this -
<button id="click">
CLICK
</button>
<div class="header" id="textChange">Text</div>
And then in your JS -
$( "#click" ).click(function() {
$( "#textChange" ).replaceWith( "<h2>New heading</h2>" );
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to get an text field text in to an array? Is it possible to get a text from text field and put it in to character array to select each Alphabet and use it in different places?
Like I have a words
Computer
<input type="text" name="name" />
I need it like in different Block Like Name Speel
[C] [o] [m] [p] [u] [t] [e] [r]
Any help appreciated.
What you might want is the following JavaScript:
"Computer".split("")
I think that the main problem is this part: "select each Alphabet and use it in Different Places Like..." so the solution is to use .charAt() function.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "How are you doing today?";
var res = str.charAt(0);
document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I believe js shoulod support:
<script>
text = "This Title";
document.write( text.heading(1));
</script>
but it is not so. Any correction or explanatioin?
Why do you do .heading(1) ??
<script>
text = "This Title";
document.write(text);
</script>
Or you are trying to change title?
document.title = text;
Or you want to add text to particular place on the webpage?
<div id="heading1">
</div>
<div id="heading2">
</div>
<script>
text = "This Title";
text2 = "This is not Title";
document.getElementById('heading1').innerHTML = text;
document.getElementById('heading2').innerHTML = text2;
</script>
I guess you're trying to write <h1>This Title</h1> but there is no heading method in String prototype.
HTML Tag Methods (http://msdn.microsoft.com/en-us/library/ie/ff806183%28v=vs.94%29.aspx) may be a bit confusing cause javascript supports just few of html tags.
If you really need to make String.heading work, try this:
String.prototype.heading = function(level) {
return '<h' + level + '>' + this + '</h' + level + '>';
};
Note: extending prototype of built in objects is generally bad idea.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
i have the following html code:
<div class=imgHolder>
<img src="some address"/>
<a class="del" onClick="function">delete</a>
</div>
how find image tag in the parent's of by pure java script
Javascript:
function clickFunc(e){
var tgt = e.target;
var parent = tgt.parentNode;
var img = parent.getElementsByTagName("img")[0];
parent.removeChild(img);
}
HTML:
<div class=imgHolder>
<img src="some address"/>
<a class="del" onClick="clickFunc">delete</a>
</div>
I tried to write it as self explanatory, but a walk through:
e is the click event.
e.target is what the user clicked on (Your anchor tag)
parent is the parent node of the anchor.
img is the first image in the parent node.
Remove img from parent.
<div class=imgHolder>
<img src="some address"/>
delete
</div>
Script:
function deleteThis(sender){
var childs = sender.parentNode.childNodes;
for (var i = 0; i < childs.length; i++){
if (childs[i].tagName === 'img')
alert(childs[i].src);
}
}
OR, if you're sure img will be always before link.
function deleteThis(sender){
if (sender.previousSibling.tagName === 'img')
alert(sender.previousSibling.src);
}