After clicking on a specific place in an image map, the function add() should be run, a paragraph should be created, one should see "not available yet" in red for five seconds, and the paragraph should be deleted again.
function add() {
var x = document.createElement("P");
var t = document.createTextNode("This is a paragraph.");
x.appendChild(t);
document.body.appendChild(x);
setTimeout ( "del()", 5000 );
}
function del() {
removeChild() }
So there are a couple of things which are not correct.
1: how do you change the text to red? And to another font?
2: the del()function should remove the paragraph, but I don't know what to place there. Just removeChild(P) ? Wait... P isn't even a Child...
Could anyone help me with getting the desired result? (I mean, this: one should see 'not available yet' in red for five seconds, afterwards the paragraph should disappear.
to change the text to red using JavaScript:
para.style.fontFamily = 'Arial'
para.style.color = 'red'
to change the text to red using CSS:
CSS:
.mypara {
color: red;
font-family: Arial;
}
JS:
para.className = 'mypara'
to remove the paragraph:
var para = document.createElement("P");
function add() {
var t = document.createTextNode("This is a paragraph.");
para.appendChild(t);
document.body.appendChild(para);
setTimeout (del, 5000);
}
function del() {
para.parentNode.removeChild(para);
// or if you just need to empty the paragraph
// para.innerHTML = '';
}
To make that text red: There are two ways. Either you write:
x.style.color = '#ff0000';
Or you give it a class:
x.className = 'red_text'
... and define the style for that class in a stylesheet.
To remove the paragraph, just do the reverse of what you did to add it:
document.body.removeChild(x)
Take a look to this example.
1: how do you change the text to red? And to another font?
I suggest to use CSS for everything regarding style and simply assign the right class to the element. You can specify whatever you need. For example also use CSS for a fade in effect.
2: the del()function should remove the paragraph, but I don't know what to place there. Just removeChild(P) ?
I suggest to use a closure and pass parent and child in order to use parent.removeChild(child);. If you do not need nothing else you even could avoid to define another function.
Related
I am trying to change the background colors of all italized text, instead of using a span on every single word through the paragraph.
It says <em> next to the italized text.
I have tried
$(".em").css({
"background-color":"#d9f9f9",
});
or/and tried this:
var elem=document.getElementByTagName(em)[1];
elem.style.backgroundColor='#d9f9f9';
See querySelectorAll:
Notices this method return an array, so we should loop it:
var emList = document.querySelectorAll('em');
[].forEach.call(emList , function(em) {
// do whatever
em.style.color = "red";
});
You could try the following:
const italics = document.querySelectorAll('em');
italics.forEach(italic => {
italic.style.backgroundColor = '#d9f9f9';
});
Your first suggestion says ".em" where it should say "em". Your seconds suggestion says em where it should say "em".
Currently, the code is not functioning correctly. If the text is altered to only the word 'Grocery', the text doesn't turn blue. Any edit turns the task background pink. How can I add more variety to this function, i.e. if the text includes the word Grocery, or Milk, among other words, it will edit to blue. Or if the text only has the word Grocery, or Milk, it will turn blue. Or any other color changes that could be made by editing the task.
//dynamic colour edit task
function change(){
var text=document.getElementById("div").innerHTML;
if(text=="A"){
document.getElementById('div').style.backgroundColor=("blue");
}
else{
document.getElementById('div').style.backgroundColor=("pink");};
/*can add similar code*/
};
Try something like this
Have a style with classes
.blue { color: blue }
.pink { color: pink }
and use
//dynamic colour edit task
const shopping = ["Milk","Grocery"]
function change() {
const div = document.getElementById('div');
const text = document.getElementById("div").textContent;
const found = shopping.includes(text);
div.classList.toggle("blue",found);
div.classList.toggle("pink",!found);
}
If you add all your blue items in an array, you could just use indexOf to check if the text is in the array.
function change() {
var blueItems = ["Grocery", "Milk", "Water"];
var text = document.getElementById("div").innerHTML;
if (blueItems.indexOf(text) !== -1) {
document.getElementById('div').style.backgroundColor = ("blue");
} else {
document.getElementById('div').style.backgroundColor = ("pink");
};
/*can add similar code*/
};
I'm not quite sure what the question is asking but if you are looking to change the background of something based off the word, I would start by using an array of the words you want to check against to change the color. If that word is found in the array then change the styles. I believe the array.find() method would work for your case but I am attaching the javascript arrays cheat sheet for you too https://dev.to/vincenius/javascript-array-functions-cheatsheet-1c15
Set all your keywords in the array. Check value from the array if div text matches the content using a loop.
var keys = ["Milk", "Grocery"]
change(keys);
function change(keys) {
keys.some(function(value, index, _arr) {
var text = document.getElementById("div").innerHTML;
if (text.indexOf(value) > -1) {
document.getElementById('div').style.backgroundColor = ("blue");
return value === value;
} else {
document.getElementById('div').style.backgroundColor = ("pink");
};
/*can add similar code*/
});
};
<div id='div'>Milk</div>
Note:
change div content to see different color apply on div.
Use toLowerCase() for case sensitivity.
I have put a Javascript text element in an HTML div field and now I want the text color to be white. I also want to make a few other changes to the text. Now I wonder how I can style the text element or whether it can
is possible in this form.
(Translated into Google Translate, may contain errors)
This is my javascript code:
var bghtooltipin = document.getElementById('bgh-tooltipin1');
var bghtooltipout = document.getElementById('bgh-tooltipout1');
bghtooltipin.addEventListener('mouseover', bghtooltipinmouseOver);
bghtooltipin.addEventListener('mouseout', bghtooltipoutmouseOut);
function bghtooltipinmouseOver() {
bghtooltipout.innerHTML = 'Go to Login';
}
function bghtooltipoutmouseOut() {
bghtooltipout.innerHTML = ' ';
}
there are 2 ways, either use css classes or direct style manipulation
var bghtooltipin = document.getElementById('bgh-tooltipin1');
var bghtooltipout = document.getElementById('bgh-tooltipout1');
bghtooltipin.addEventListener('mouseover', bghtooltipinmouseOver);
bghtooltipin.addEventListener('mouseout', bghtooltipoutmouseOut);
function bghtooltipinmouseOver() {
bghtooltipout.innerHTML = 'Go to Login';
bghtooltipin.style.color = "white";
}
function bghtooltipoutmouseOut() {
bghtooltipout.innerHTML = ' ';
bghtooltipin.style.color = "black";
}
<div id="bgh-tooltipin1">Test 1</div>
<div id="bgh-tooltipout1"></div>
It looks like you want to change the text color when the user mouses over the button. CSS has a pseudo-class class that covers this usecase. Take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
Thanks #Józef Podlecki now I would like to add a small transition to my text, so that the text when hovering after about 6 milliseconds. That would be my second change to the text.
Because I didn't manage that with the classic style element.
I'm trying to make a button create new entries in a list that display similar to this:
"#1 new Click Me"
Except I want to make "Click Me" to show up as yellow text in a black box, and then I want to make the black box disappear and the text turn brown on mouseover. I've been able to make the list appear, but don't know how to edit the style of the text to make it appear the way I want to. The most code I think I need to give for this is this:
var li = document.createElement("li");
var liBody = document.createTextNode("#"+numOfNewCMs+
" new " + newClickMe);
li.appendChild(liBody);
And then I insert li into the list.
I figure I should make newClickMe a variable and edit that and then put it next to the rest of the text in the liBody variable, and I figure the HTML span element is the best way to do that, except I don't even know quite what the span element really does. How do I go about editing the style of that particular string? I can't get around to figuring out how (if I even can) make the text turn brown on mouseover until I do so.
Never met CreateTextNode, but i guessliBody.style.fontSize="12px"should help. And other properties such as 'fontWeight,color,fontStyle...'
HTML elements have a style property that can be used to apply CSS styles to them.
For example:
var newClickMe = document.createElement("span");
newClickMe.style.backgroundColor = "#000000";
newClickMe.style.color = "#FFFF00";
newClickMe.innerText = "Click Me";
var li = document.createElement("li");
var liText = document.createTextNode("#"+numOfNewCMs+
" new ");
li.appendChild(liText);
li.appendChild(newClickMe);
Will make the list item have a black background with yellow text.
For more details on the style property, MDN has a great section on it: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
And here is a reference page to translate CSS properties into their JavaScript equivalent: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference
I'm assuming you want the styles to change on mouseOver. I just changed the styles using css' :hover. Is this what you had in mind?
var numOfNewCMs=1;
function generateLi(){
var li = document.createElement("li");
var liBody = document.createTextNode("#"+numOfNewCMs+
" new ");
var sp = document.createElement("span");
var spBody = document.createTextNode("Click Me");
sp.setAttribute("id", "sp"+numOfNewCMs);
sp.setAttribute("onmouseover", "highlight("+numOfNewCMs+")");
sp.setAttribute("onmouseout", "highlight2("+numOfNewCMs+")");
sp.style.backgroundColor='black';
sp.style.color='yellow';
sp.appendChild(spBody);
li.appendChild(liBody);
li.appendChild(sp);
lis.appendChild(li);
numOfNewCMs++;
}
function highlight(id){
var element= document.getElementById('sp'+id);
element.style.backgroundColor='white';
element.style.color='brown';
}
function highlight2(id){
var element= document.getElementById('sp'+id);
element.style.backgroundColor='black';
element.style.color='yellow';
}
li{
margin-bottom:20px;
}
li > span{
padding:5px;
margin-bottom:10px;
}
li:hover > span{
color:brown;
background-color:white;
}
<button onclick="generateLi()">Click me</button>
<div id="lis" style="margin-top:20px;"></div>
I'm trying to make it so that the text inside a text area can be toggled to be bold or not, by pressing a button. I have the following code:
function bold()
{
var ta = document.getElementById("textArea");
if(ta.style.fontWeight == "normal"){
ta.style.fontWeight = "bold";
}
else{
ta.style.fontWeight = "normal";
}
}
When the I press the button, nothing happens the first time. But I press it a second time and it runs perfectly. Running it through a debugger, the variable "ta" becomes equal to "" the first time, and then "normal" the second time, despite the text area being set to normal in the css.
Any ideas?
Thanks
So the reason this is happening is because ta.style is accessing the style attribute of the textarea element, which will not have any information about styles coming from CSS. You could write your textarea like this, and it should work with what you have:
<textarea id="textArea" style="font-weight:normal"></textarea>
But, I'd recommend you do something along these lines in your js:
function bold()
{
var ta = document.getElementById("textArea");
if(ta.style.fontWeight !== "bold"){
ta.style.fontWeight = "bold";
}
else{
ta.style.fontWeight = "normal";
}
}
Might also be helpful to rename your function to toggleBold ;)
Instead of trying to fight it, just change your condition:
if (ta.style.fontWeight == "normal" || ta.style.fontWeight === '') {