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>
Related
I'm trying to copy text to clipboard that is inside a h3 tag. I get the following error at the copyText.select() code line.
Uncaught TypeError: copyText.select is not a function
at HTMLDivElement.
edit: When using on a input-tag the copy to clipboard function works, but not when inside h3 tag.
HTML
<div class="colorDiv" id="firstColorObject">
<h3 class="colorCode" id="p1" value="123">#Color 1</h3>
</div>
JavaScript
document.querySelector("#firstColorObject").addEventListener("click", function(){
var copyText = document.getElementById("p1");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}, false);
You can call select with an <input>-element but not with a <h3>-element.
Nevertheless you can take advantage of <input> when you assign the content of #p1 to a hidden field before calling select with it.
Note that: Calling select with an hidden field only works when you wrap an actually visible field around a <div>-element that is hidden (only tested with opacity:0). A value could not be copied (through select and document.execCommand("copy")) from a truly hidden input like this:
<input type="hidden" id="copyText"/>
Hope my example below helps you (to execute it click on "Run Code snippet"-Button):
document.querySelector("#firstColorObject").addEventListener("click", function(){
var p1 = document.getElementById("p1");
// set "#Color 1" with the hidden field so that you can call select on it
var hiddenField = document.getElementById("copyText");
hiddenField.value = p1.innerHTML;
hiddenField.select();
document.execCommand("copy");
alert("Copied the text: " + hiddenField.value);
}, false);
<div class="colorDiv" id="firstColorObject">
<h3 class="colorCode" id="p1" value="123">#Color 1</h3>
<div style="opacity:0">
<input type="text" id="copyText"/>
</div>
</div>
The input.select() function is not applicable to h3 . Manipulating the selection is usually done
with window.getSelection().addRange() .
Try
<html>
<body>
<h3>Hello world</h3>
<script type="text/javascript">
var h3 = document.querySelector('h3');
var r = document.createRange();
r.selectNode(h3);
window.getSelection().addRange(r);
document.execCommand("copy");
</script>
</body>
</html>
Clipboard js will be helpfull in your case
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);
I need help with my code, because everything works except for one thing. After I input text in the three textboxes and click the button, I get a div with the text, but when I click on the text I want only the nummer part to get style="bold", not the whole div.
What's the easiest way to accomplish this, if possible, without putting the nummer text in its own element?
<html>
<head>
<title>Uppgift 6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var $contact = {};
$contact.List= function() {
this.addContact= function(namn ,efternamn, telefon) {
var cont= new $contact.People(namn, efternamn, telefon)
document.body.appendChild(cont.element);
};
};
$contact.People= function(namn, efternamn, telefon) {
this.fNamn= namn;
this.eNamn= efternamn;
this.tele= telefon;
this.element= document.createElement("div");
this.element.innerHTML= namn+" "+efternamn+" "+telefon;
var ele= this.element;
this.element.addEventListener("click", function () {
ele.style.fontWeight="bold";
});
};
var myList;
function startUp() {
myList= new $contact.List();
}
</script>
</head>
<body onload="startUp();">
<form>
<input type="text" id="fNamn" placeholder="Föramn"/>
<input type="text" id="eNamn" placeholder="Efternamn"/>
<input type="text" id="tele" placeholder="Nummer"/>
<p></p>
<input type="button"
onClick="myList.addContact(document.getElementById('fNamn').value,
document.getElementById('eNamn').value,
document.getElementById('tele').value);"
value="Skriv ut"/>
</form>
</body>
</html>
There is no way to do this - you either work with the div element or you add a new element that has it's own properties you can work with. There is no way to change the properties of only a part of the text in an element.
Upload and use a custom font where only the numerals are bold.
Is it possible to add a textbox into an iframe, and append it into the src of the iframe. So i have created an modal box displaying a button for the user to click "ADD BUTTON"
<div id="addFeature" class="openAdd">
<div>
X
<h2>Add...</h2>
<button class="text" type="button">Text</button>
</div>
</div>
As the user clicks on the button, I need the modal box to close and a text box added. The following iframe is within main.html. As you can see the iframe displays the other html page.
<div>
<iframe class="newIframe" id="newIframe" src="webpage.html" onload="iFrameOn();">
Your browser does not support Iframes
</iframe>
</div>
Though I need the textbox to be added in webpage.html which is
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="iFrameOn();">
<div id="design">
</div>
</body>
</html>
JS:
addTextBox() {
var text = "'<div><input type='textbox'/></div>'"
var textbox = document.createElement('div');
textbox.innerHTML = text;
var addText = document.getElementById('div').src = "webpage.html";
addText.appendChild(textbox);
}
Is it possible to do what I'm asking?
I'm afraid explaining this in the way you're trying to do this now, would be an endless swamp. Here's some guidelines, how you can achieve this quite easy.
Probably you need to remove the onload from iframe tag first. Then put these lines to your main page:
var textForIframe; // Take care that this variable is declared in the global scope
function addText () {
document.getElementById('newIframe').src = 'webpage.html';
textForIframe = '<div><input type="text" /></div>'; // or whatever text you need
return;
}
When ever your dialog is ready, call addText().
Then in webpage.html, remove the onload from body tag, and add the function below to somewhere after <script src="index.js"></script> tag.
window.onload = function () {
var addTextElement = document.getElementById('design'), // or whatever element you want to use in iframe
textToAdd = parent.textForIframe;
// depending on what iFrameOn() does, place it here...
addTextElement.innerHTML = textToAdd;
iFrameOn(); // ... or it can be placed here as well
return;
};
These snippets add a new input type="text" to #design within iframe.
I want to create a canvas that displays text from textarea.
I have a problem with controlling the size of the text in textarea.
In other words, I want the user to choose the size of the text then write it in the text area which in turn will be displayed on the canvas once the button is clicked.
I tried this code but there is a problem i do not what is it.
Here is a sample of the code:
<script>
var y = 30;
function pasteText()
{
Text=document.getElementById('textarea').value;
var x = 30;
var lineheight = 15;
var lines = Text.split('\n');
$("#clr2 font").click(function (){
context.fillStyle=$(this).css("color");
});
$("#clr3 font").click(function (){
context.font=$(this).css("font-size")+ "Arial";
});
for (var i = 0; i<lines.length; i++)
context.fillText(lines[i], x, y + (i*lineheight) );
y+=38;
}
</script>
<body>
<canvas class="canvas" id="canvas" width="600" height="200" style="border:1px solid"> </canvas>
<font id="clr3">
<font style="font-size:9pt;"> Small</font>
<font style="font-size:16pt;"> Medium</font>
<font style="font-size:24pt;"> Large</font>
</font>
<textarea name="textarea" cols="72" rows="6" id="textarea" value="Type the text here" ></textarea>
<input type="button" name="paste" value="Paste on the canvas" onClick="pasteText()"/>
<script type="text/javascript">
var container = layer2.parentNode;
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
</script>
</body>
I am sure that the problem is in context.font
because context.font accepts the size and the family of the font.
I am not sure if what I wrote in my code is the correct syntax
context.font=$(this).css("font-size")+ "Arial";
You have quite a lot of problems in your code, some that pop immediately:
The for loop code in not enclosed in braces { }
The click handlers are defined inside the pasteText function and thus will only be registered after the user clicked the paste text button.
the <font> tags are not standart tags and some browsers, especially IE won't like it.
update:
Is it possible that what's missing is a space between the font size and the font face? try to add a space before the Arial:
context.font=$(this).css("font-size")+ " Arial";