I know that I can use nodeValue to change the text inside the text likeelement.firstChild.nodeValue = text but can I use setAttribute to do the same thing?
HTML :
<p id="description">Some text here.</p>
JS :
var description = document.getElementById("description");
description.setAttribute(nodeValue, text);
It doesn't work. Does it means that "nodeValue" is not an attribute of an element?
No. setAttribute does, well, set an attribute. It doesn't set contents.
However, you can use CSS to display an attribute as if it were content.
var description = document.getElementById("description");
description.setAttribute('data-content', 'Updated text');
#description::after {
content: attr(data-content);
}
<p id="description" data-content="Some text here."></p>
This should only be used for styling purposes, not to insert real content.
You want to set node content here and not node attribute so you could use .textContent instead :
// Set the text content:
description.textContent = text;
Hope this helps.
var description = document.getElementById("description");
var text = 'New text';
description.textContent = text;
<p id="description">Some text here.</p>
No you cannot. setAttribute is used to manipulate HTML element attributes.
For example, if you wanted to update a button to be disabled you would do something like:
var button = document.querySelector('my-button');
button.setAttribute('disabled', 'disabled');
To change the text you should use textContent:
var description = document.getElementById("description");
description.textContent = 'New text here.';
Related
I'm trying to build something similar to a virtual keyboard for french special characters, so the user can copy them easy by clicking on the special character button and paste them wherever they need.
I'm not very good in javascript and have been struggling with bits of code I found to create what I need. So far, I can make it work for just one button with this code.
For my html (just an excerpt)
<div class="copy_btn_container">
<div class="copy_btn_block">
<p>Accents graves et accents aigüs<p>
<button onclick="copyStringToClipboard()" id = 'accbtn1' data-target="accbtn1" class="copy_btn">é</button>
<button onclick="copyStringToClipboard()" id = 'accbtn2' data-target="accbtn2" class="copy_btn">è</button>
<button onclick="copyStringToClipboard()" id = 'accbtn3' data-target="accbtn3" class="copy_btn">à</button>
<button onclick="copyStringToClipboard()" id = 'accbtn4' data-target="accbtn4" class="copy_btn">ù</button>
</div>
</div>
And my javascript is
function copyStringToClipboard () {
var str = document.getElementById("accbtn1").innerText;
// Create new element
var el = document.createElement('textarea');
// Set value (string to be copied)
el.value = str;
// Set non-editable to avoid focus and move outside of view
el.setAttribute('readonly', '');
el.style = {position: 'absolute', left: '-9999px'};
document.body.appendChild(el);
// Select text inside element
el.select();
// Copy text to clipboard
document.execCommand('copy');
// Remove temporary element
document.body.removeChild(el);
}
So I know that document.getElementById accepts only one element, so I tried document.getElementsByClassName but it return a "undefined" value.
I'm open to other ways for the js too, as I saw that it was possible to use constants or such, but all of the example are designed to copy values from input fields, and for some reason I can't manage dont tweak them into working for copying the button's text.
Any help would be appreciated ! Thanks
You could pass the id or data attribute into your function like so:
function copyStringToClipboard (target) {
var str = document.getElementById(target).innerText;
// Create new element
var el = document.createElement('textarea');
// Set value (string to be copied)
el.value = str;
// Set non-editable to avoid focus and move outside of view
el.setAttribute('readonly', '');
el.style = {position: 'absolute', left: '-9999px'};
document.body.appendChild(el);
// Select text inside element
el.select();
// Copy text to clipboard
document.execCommand('copy');
// Remove temporary element
document.body.removeChild(el);
}
<div class="copy_btn_container">
<div class="copy_btn_block">
<p>Accents graves et accents aigüs<p>
<button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn1' data-target="accbtn1" class="copy_btn">é</button>
<button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn2' data-target="accbtn2" class="copy_btn">è</button>
<button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn3' data-target="accbtn3" class="copy_btn">à</button>
<button onclick="copyStringToClipboard(this.getAttribute('data-target'))" id = 'accbtn4' data-target="accbtn4" class="copy_btn">ù</button>
</div>
</div>
I have an HTML document with a 'p' element which I would like a portion of copied to the clipboard when the whole element is clicked.
<p class="pageID"><strong>Page ID: </strong>#A16</p>
Which returns: PageID: #A16
I want to have it so when I click anywhere on this line the page ID (#A16) is copied to the clipboard but nothing else. I've seen some similar questions on here and tried a bunch of different JavaScript solutions but nothing is working.
Any ideas?
Thanks!
You could try something like this:
<p class="pageID"><strong>Page ID: </strong><span id="toCopy">#A16</span></p>
<script>
document.querySelector(".pageID").addEventListener('click', function() {
var temp_input = document.createElement("INPUT");
temp_input.value = document.querySelector('#toCopy').innerHTML;
temp_input.select();
document.execCommand("copy");
});
</script>
No jQuery needed!
Off the top of the head, I'd wrap whatever you're trying to copy into it's own element and copy the text of the element.
ex: <p class="pageID"><strong>Page ID: </strong><span class="your-class-name">#A16</span></p>
You should wrap that text in element with some id and then focus on it and copy like this
var el = document.getElementById("myText");
el.select();
document.execCommand("copy");
You can do something like this:
<div id="myId"><p class="pageID" id="myElement"><strong>Page ID: </strong>#A16</p></div>
<script>
$('#myId').onClick(function() {
var copyText = document.getElementById("myElement");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value); // do whatever you want with this text.
});
</script>
I wich to replace a paragraph with a textarea tag when clicking on the paragraph, the textarea should contain the text that was in the paragraph:
<div id="right"><p><pre><?php echo $descri; ?></pre></p></div>
Jquery script :
$(function(){
$('#right').on('click', 'p', function(){
var $p = $(this);
var old = $p.html();
if(/<textarea rows="4" cols="40" id="descri" name="descri"/.test(old))
return;
$p.html('<textarea rows="4" cols="40" id="descri" name="descri" value="' + old + '"/>')
.find('textarea')
.focus()
.on('blur', function(){
var value = this.value;
$.post('listener_updates.php', {description: value})
.done(function(){
$p.html(value);
})
.fail(function(){
$p.html(old);
alert('Could not update title');
});
});
});
});
Now when I click on the paragraph text, nothing happens but when I click a little under the paragraph text, then the textarea appears and is empty.
Thank you for your help
This is because you can't put a pre element inside a p element, so the browser's correcting the invalid DOM. The content model of p is phrasing content, but pre isn't valid in phrasing content, only flow content.
When you give this to Chrome:
<div class="right"><p><pre>This is the text</pre></p></div>
...it actually creates this DOM:
<div class"right"><p></p><pre>This is the text</pre><p></p></div>
Note that the pre is no longer in any p.
If you want the pre, simply use pre on its own (without the p). pre is a lot like like p: They both have the same content model, they're both valid in the same places, and they're both display: block by default.
Alternately, if your only goal is not to have line wrapping and other such, on modern browsers you can get rid of the pre (keeping the p or using a div if the semantics of p aren't appropriate) and use the CSS white-space property (e.g., white-space: pre) instead.
Re your comment below:
but I can't get the text inside the pre tag to show on the textarea
Just put the pre's contents() into the textarea, put the textarea in the DOM where you want it, and remove or hide the pre. This removes it, for instance: Live Example
$(".right").on("click", "pre", function() {
var $pre = $(this);
var $textarea = $("<textarea>");
$textarea.append($pre.contents());
$pre.replaceWith($textarea);
return false;
});
I'm editing a script that at one point does the following:
err_node = document.createTextNode(err_decoded_str);
However I need the resulting text node to be wrapped in <label class="error">generated error node in here</label>
How can this be done without using jQuery? If needs be I can change createTextNode() to a different function to achieve this.
So change it to use createElement instead
err_node = document.createTextNode(err_decoded_str);
to
err_node = document.createElement("label");
err_node.className = "error";
err_node.innerHTML = err_decoded_str;
If you want, you can create a textnode and append it to the err_node.
err_node = document.createElement("label");
err_node.className = "error";
var err_textnode = document.createTextNode(err_decoded_str);
err_node.appendChild(err_textnode);
When you wrap the text in a <label> it becomes an element instead of a text node. Look at document.createElement in the MDN documentation here.
label = document.createElement('label');
label.className = 'error';
label.appendChild(document.createTextNode(err_decoded_str));
// attach the label to where ever its supposed to go
err_node = document.createTextNode(err_decoded_str);
var label = document.createElement("label"); // create label element
label.classList.add("error"); // add error class to label
label.appendChild(err_node); // append err_node to label
console.log(label);
How can I add custom text to already written text in textarea using javascript??Thanks...
function addText(elId,text) {
document.getElementById(elId).value += text;
}
or:
function addText(elId,text) {
var obj = document.getElementById(elId);
var txt = document.createTextNode(text);
obj.appendChild(txt);
}
myTextarea.value += "text to add to the textarea"
Grab the existing text in the textarea (the element's .value)
Combine your existing text (append, prepend, insert, or whatever you need)
Write the result back to the textarea.
Tah-dah!