I would like to make a text bold by using a function which gets the text as a parameter, here is my code:
<script>
function font(b)
{
b.style.fontWeight = "bold";
alert(b);
}
</script>
<input onclick="font('aaaa');" type="button" value="Font (1)">
My problem that I'm not getting the desired response, though without b.style.fontWeight = "bold"; it alerts "aaaa".
I don't see what is the problem here, I tried to put the parameter in a variable and then change its property but it doesn't work either.
Any ideas on how to resolve this?
Create an input field where you'll write your text and create a button which will change the font-weight of the text. After that attach an event listener to the button. When you click the button your font will change to bold.
working demo: https://jsfiddle.net/4kzsq2tb/
HTML
<button id="font-button">
change font to bold
</button>
<input id="input-field" type="text"/>
JS
document.getElementById('font-button').addEventListener('click', () => {
const inputField = document.getElementById('input-field');
font(inputField);
})
function font(b) {
b.style.fontWeight = "bold";
}
<div id="c"></div>
<input onclick="font('aaaa');" type="button" value="Font (1)">
<script>
function font(b)
{
document.getElementById('c').style.fontWeight = "bold";
document.getElementById('c').innerHTML=b;
}
</script>
works fine function gets text as parameter and makes it bold, well makes div style bold not text itself as guys said u cant make text or variable bold
Related
I am looking for the simplest possible solution to copy text within a html p tag on an image click to the clipboard.
I tried some small (code wise) solutions from this thread Click button copy to clipboard using jQuery, but it just won't copy the text. In my case I need it to work with an image click rather than a button click.
$("#clipboardImage").click(function() {
$("#didText").select();
document.execCommand("copy");
alert("Text copied")
});
#didText {
color: #1816A9;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div id="didContainer">
<p id="didText" type="text">I hopefully end up in the form field anytime soon!</p>
<img id="clipboardImage" src="" alt="Click me, to bring him down!">
</div>
<br>
<form>
Worked?
<input type="text" name="copied Text">
</form>
</html>
If I understand well your goal is to put the text from the p tag into the input field.
Just select the text with JQuery .text() and put it into the input filed as a value
EDIT
So, if the main goal is to put some text from an element to the clipboard I suggest to use a dedicated function, there's a workaround that create an invisible and readonly textarea and use it as a "proxy" to store and copy the text to your clipboard.
NB: to avoid passing the text to the input field just get rid of $("input").val(text); row.
function copyToClipboard (str) {
var el = document.createElement('textarea'); // Create a <textarea> element
el.value = str; // Set its value to the string that you want copied
el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof
el.style.position = 'absolute';
el.style.left = '-9999px'; // Move outside the screen to make it invisible
document.body.appendChild(el); // Append the <textarea> element to the HTML document
var selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false; // Mark as false to know no selection existed before
el.select(); // Select the <textarea> content
document.execCommand('copy'); // Copy - only works as a result of a user action (e.g. click events)
document.body.removeChild(el); // Remove the <textarea> element
if (selected) { // If a selection existed before copying
document.getSelection().removeAllRanges(); // Unselect everything on the HTML document
document.getSelection().addRange(selected); // Restore the original selection
}
};
$("#clipboardImage").click(function() {
var didText = $("#didText");
var text = didText.text();
copyToClipboard(text);
$("input").val(text);
alert("Text copied")
});
#didText {
color: #1816A9;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div id="didContainer">
<p id="didText" type="text">I hopefully end up in the form field anytime soon!</p>
<img id="clipboardImage" src="" alt="Click me, to bring him down!">
</div>
<br>
<form>
Worked?
<input type="text" name="copied Text">
</form>
</html>
I want to add text to textarea when user clicks a button. I have used the code bellow :
<script>
document.addEventListener('DOMContentLoaded', start, false);
function start(){
document.getElementById("button0").addEventListener("click", function(){
addText(this);
});
function addText(elem) {
document.getElementById("transcript").innerHTML += elem.value;
}
};
</script>
When the users click the button the text added to the textarea but the moment they type using their keyboard they won't be able to add the text using the button anymore.
use .value not .innerHTML.
.innerHTML overwrites the markup of the element, not just the text. Since it's a form element you should be manipulating its value only.
document.getElementById("button0").addEventListener("click", function() {
document.getElementById("transcript").value += "huh";
});
#transcript {
height: 100px;
}
<button id="button0">Click Me</button>
<textarea id="transcript"></textarea>
i know how to set font style italic in HTML but now i'm trying to do that only with java script . Is it possible to do that in java script ? . Can someone help\clarify me pls . Here is my code ,
myJson.name.push(mainSteps.name); // Need to changes this in italic (js code)
A JavaScript string itself doesn't have a concept of a "style". Styling only applies when you output the string somewhere. If you output it to HTML, you can use HTML or CSS to style it.
So if you are asking whether there is an "output-agnostic" way to style a JavaScript string, the answer is no.
Btw, the code you wrote is JavaScript (assuming you pass a proper value for the ID):
document.getElementById(#Html id).style.fontStyle = "italic";
and if you want to style the HTML output, then this would be the way to go.
In Javascript you can not change font style because it does not exist in javascript as such. Font style matters only when the data has to be shown which is when it is written on some where in HTML .This is how you may change the fontstyle for entire body
This is in italics
<script>
function italicsBody() {
document.body.style.fontStyle = "italic";
}
italicsBody()
</script>
Similary if you want the same for specifi data you may do it using getElemenById . Check the following code
<ul id="names">
</ul>
<script>
function italicsBody() {
document.getElementById("names").style.fontStyle = "italic";
}
function populateNames() {
var names = ["name1","name","name3"]
var nameList = document.getElementById("names");
for (var key in names) {
nameList.innerHTML = nameList.innerHTML + ' <li> ' + names[key] + '</li>';
}
}
populateNames()
italicsBody()
</script>
Here is the jsfiddle for the same jsfiddle
document.getElementById("myP").style.fontStyle = "italic";
You can use "somestring".italics() to get "<i>somestring</i>"which might be what you are after. I suggest you use CSS as others said though - italics is not standard anymore.
I Given One Example As Below
function myFunction() {
document.getElementById("myP").style.font = "italic 15px arial,serif";
}
myFunction();
<p id="myP">This is a paragraph.</p>
This Is Second Example When User Click On Button Then Style Applying From Java script .
function myFunction() {
document.getElementById("myP").style.font = "italic 20px arial,serif";
}
<p id="myP">This is a paragraph.</p>
<button type="button" onclick="myFunction()">Set font</button>
myJson.name.push(mainSteps.name).style.fontStyle = "italic";
It is done the same way.
I have a div and it refreshes every 3 seconds. Inside that div there is an input box and whatever I type gets cleared out in 3 seconds. Is there a way for the text to remain inside the input box and not to get cleared out?
index.js
<div id="show_here"></div>
<script type ="text/javascript">
$(document).ready(function() {
setInterval(function() {
$('#show_here').load('fetch.php')
}, 3000);
});
</script>
fetch.php
<div>
// some code here
<input type="text" id="input" />
</div>
Input box needs to be inside that page since it is inside a while loop. Can this be done or i need to change my whole code to make this work?
Preserve and then set
setInterval(function() {
my_val = $('#input').val();
$('#show_here').load('fetch.php');
$('#input').val(my_val);
}, 3000);
I am trying to activate a text input using a button.
My function is like this.
function showHide4()
{
document.getElementById('snack').readOnly=false;
document.getElementById('snack').style.backgroundColor"#ffffff";
}
This function makes text input writable and changes background to white, but it gets activated only after I click on it.
Note:- My idea of activated text input is cursor(|) blinking in it. maybe activated is not a correct word for it but I don't know what else to call it.
EDIT:- I tried focus(), Problem in using focus() is Default value in my text input is getting selected automatically, which is not what I want, I want to put cursor(|) after that value.
Try this, I think focus() is what you are looking for:
function showHide4() {
var el = document.getElementById('snack');
el.readOnly = false;
el.style.backgroundColor = "#ffffff";
el.focus();
el.value = el.value;
};
To do what you want you need to cheat a bit, just reset (set again) the value of the input and it will work as you want.
DEMO HERE
function showHide4()
{
document.getElementById('snack').readOnly = false;
document.getElementById('snack').style.backgroundColor = "#ffffff";
document.getElementById('snack').focus();
}
This will work!
How to activate text input on a button click in React
This is how i did it using react.
export default function App() {
function showHide4() {
var el = document.getElementById("snack");
el.style.backgroundColor = "#fdd";
el.focus();
}
return (
<div className="App">
<input type="text" id="other" value="100" readonly="true" />
<input type="text" id="snack" />
<button type="button" onClick={showHide4} id="button">
Click
</button>
</div>
);
}