My JS code return undefined. The tag is goog, but value is missing. why?
<body>
<p id = "demo">fffffffff</p>
<button onclick = "fun()">click</button>
<script type="text/javascript" defer = "defer">
function fun(){
alert(document.getElementById("demo").value);
}
</script>
</body>
p tag doesn't have a value. It have textContent. Only input elements have value attribute
<body>
<p id = "demo">fffffffff</p>
<button onclick = "fun()">click</button>
<script type="text/javascript" defer = "defer">
function fun(){
alert(document.getElementById("demo").textContent);
}
</script>
</body>
YOu need to alert the innerHTML, not the value
<body>
<p id = "demo">fffffffff</p>
<button onclick = "fun()">click</button>
<script type="text/javascript" defer = "defer">
function fun(){
alert(document.getElementById("demo").innerHTML);
}
</script>
</body>`
<p> tag is not having value. You can choose to use textContent, innerHTML or innerText. All of these has benefits and limitations.
If you only want text written in <p> then you should use textContent
textContent is not supported in IE8 or earlier
Example
<p id=“demo”><ul><li>mytext</li></ul></p>
var x=document.getElementById(“demo”);
var output = x.textContent;
Output
mytext
If you want text with Html (like UL, LI ) from <p> then you should use innerHTML
var output = x.innerHTML;
Output
mytext
innerHTML is supported by all browsers
You can also use innerText.
innerText will not include text that is hidden by CSS, but textContent will
So choose as per your requirement.
Try using the .innerHTML property instead.
alert(document.getElementById("demo").innerHTML);
Related
Hi: I want to append a js function something like function amb(){console.log("hello")} inside the script tag. But There is a problem in this. Because as the function is append to script tag it says function is not defined when i try to call. if you understand the problem or have any solution to it please help me. Thanks a lot...
<script id="append_here">
// the appended function goes in this script
</script>
<script>
a = `function amb() { console.log('hello')}`
document.getElementById('append_here').append(a)
</script>
<div id="a">
<button onclick="amb()"> amb</button>
</div>
You can't append content to a script and have the browser "re-parse" the script
You can create a new script tag, add the content, and append that to the body
<script>
const a = `function amb() { console.log('hello')}`;
const scr = document.createElement('script');
scr.textContent = a;
document.body.append(scr);
</script>
<div id="a">
<button onclick="amb()"> amb </button>
</div>
You can use eval aswell
<script id="append_here">
// the appended function goes in this script
</script>
<script>
a = `function amb() { console.log('hello')}`;
document.getElementById("append_here").append(eval(a));
</script>
<div id="a">
<button onclick="amb()">amb</button>
</div>
I m adding child divs of main div into array by id
but couldn't get what is the problem.......?
after adding into array i waant to send to ajax to write in csv
<!DOCTYPE html>
<html>
<body>
<p>Click the button to convert the array into a String.</p>
<div id='main'>
<div id='a'>
dab
</div>
<div id='b'>
nav
</div>
</div>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var array = $('#main id').map(function() {
return $(this).val();
}).get();
array.toString();
document.getElementById("demo").innerHTML = array;
}
</script>
</body>
</html>
Try to use attribute selector properly,
var array = $('#main [id]').map(function() {
return $(this).text();
}).get();
Also .val() is a jquery function is specially for the elements which yields value property when accessing it on a node object. So when you want to access the content inside a div, you have to use .text()
I would like to link the 2 scripts to send the result of the first to the clipboard, using the second script. Both work but separately
Thank you, sorry if I am not clear.
<html>
<body>
<p>Click the button to create a h1 element with some text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var h = document.createElement("H1");
var t = document.createTextNode("It works");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
<script type="text/javascript" src="ZeroClipboard.js">
</script>
<textarea name="box-content" id="box-content" rows="10" cols="70">
Will be copied to clipboard.
Line2.
Line3.
</textarea>
<br /><br />
Simply by changing .value of textarea:
document.getElementById('box-content').value = "It works";
You can not place a tag in textArea tag.
The <textarea> tag defines a multi-line text input control.A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.
HTML textarea
Instead you can place text only in areatag.
function myFunction() {
//var h = document.createElement("H1");
var t = document.createTextNode("It works");
//h.appendChild(t);
document.getElementById('box-content').appendChild(t);
}
myFunction();
<textarea name="box-content" id="box-content" rows="10" cols="70"></textarea>
i need find all images from textarea value and then replaces with inputs text elements
and the value of those with the src of the img was reemplace
after that the final string is output on a new div ('#newDiv')
my script dont replace nothing i dont know why
here is what i have done so far,
<html>
<head></head>
<body>
<textarea id="caja"></textarea>
<input type="button" onClick="parsingHtml()" value="read">
<div id="newDiv"></div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
function parsingHtml()
{
var content = $('#caja').val();
var newContent = $(content).find("img").replaceWith('<input type="text">');
alert(newContent)
$('#newDiv').html(newContent);
};
</body>
</html>
any ideas? thanks in advance!
There are 2 problems that I can see
newContent is referring to only the img elements, not the complete content
Since you are passing the value to jQuery, if the value does not start with < it will be considered as a selector not as a element creation command
So
//dom ready handler
jQuery(function($) {
//click event handler registration
$('#read').click(parsingHtml);
})
function parsingHtml() {
var content = $('#caja').val();
var newContent = $('<div />', {
html: content
});
newContent.find("img").replaceWith('<input type="text">');
console.log(newContent)
$('#newDiv').html(newContent.contents());
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="caja"></textarea>
<input type="button" id="read" value="read">
<div id="newDiv"></div>
.Hi guys! is it possible to use .innerHTML to change my textbox named text1 which is dynamically created using .appendChild? help please! TIA!
yes, it is.
<body>
<div id="test">
<p>initial text</p>
</div>
<script type="text/javascript">
var myDiv = document.getElementById('test');
var p = document.createElement('p');
p.innerHTML = "This is innerHtml";
myDiv.appendChild(p);
p.setAttribute('id', 'text1');
</script>
</body>