I have following code:
widgetEl.innerHTML = "<h2>" + name + "</h2><h3>Time Series</h3>" ;
It is working fine. I need to pass a div instead of <h3>Time Series</h3>. How can I pass the follwing div instead of <h3>Time Series</h3>.
<div id="test" class="hide" style="min-width: 700px; height: 200px; margin: 0 auto"></div>
Any help please....
I guess you've a quoting problem. Use single quotes around the JS:
widgetEl.innerHTML = '<h2>' + name + '</h2><div id="test" class="hide" style="min-width: 700px; height: 200px; margin: 0 auto"></div>';
Or if the div is a real HTML element:
widgetEl.innerHTML = '<h2>' + name + '</h2>' + document.getElementById('test').outerHTML.replace(/id\="test"/, 'id="test2"');
Notice, that in the latter case you have to change the id of the div to avoid double ids.
Because it is unclear of what you are wanting to do, here are several attempts at what you are doing using different techniques for different situations
To concatenate the dom string, use single quotes when needing to use double in the string
widgetEl.innerHTML = "<h2>" + name + "</h2>"+'<div id="test" class="hide" style="min-width: 700px; height: 200px; margin: 0 auto"></div>';
To replace the h3 with a existing div element, using replaceChild
var test = document.getElementById("test");
var h3 = widgetEl.getElementsByTagName("h3")[0];
widgetEl.replaceChild(test,h3);
Another way, use remove() to remove old element, and then appendChild to append the div
Of course using this way may not lead to what you want as there could be other stuff around the h3, just assuming the string in your example is what is currently in the div.
var test = document.getElementById("test");
widgetEl.getElementsByTagName("h3")[0].remove();
widgetEl.appendChild(test);
If needing to clone
var test = document.getElementById("test");
widgetEl.getElementsByTagName("h3")[0].remove();
widgetEl.appendChild(test.cloneNode());
Also remember to change the ID as all id's need to be unique
var clone = document.getElementById("test").cloneNode();
clone.id = "someOtherUniqueID";
var h3 = widgetEl.getElementsByTagName("h3")[0];
widgetEl.replaceChild(clone,h3);
Also note the use of getElementsByTagName will try to get any element with tag name h3, I am assuming here that it is the only one in that element, you will have to add other measures to make sure you are getting the right one if there are other h3 elements.
document.getElementById("content-11").innerHTML = '<div v-bind:style="stylesFontSize">'
+ '<p v-bind:style="stylesMessage" class="c-ecard__message" style="overflow: hidden; position: absolute; width: 69.7%; max-width: 57.7%; height: 68.3%; left: 42.1%; top: 0.8%; line-height: 1;" v-html="this.$options.filters.newline(preparedMessage)"></p></div>';
Related
I have an array of 5 divs
`<div id="cap-left2"</div>`
`<div id="cap-left1"</div>`
`<div id="cap-base"</div>`
`<div id="cap-right1"></div>`
`<div id="cap-right2"</div>`
all these divs have a background .
In my javascript I have :
let items = [capBase,capLeft1,capLeft2,capRight1,capRight2];
this works :
`var tom = items[Math.floor(Math.random()*items.length)]
console.log(tom)`
and this works
`var tom = items[Math.floor(Math.random()*items.length)]`
`console.log(tom.style)`
but I want the backgroundColor and neither of these work:
`var tom = items[Math.floor(Math.random()*items.length)]`
`console.log(tom.style.background)`
`var tom = items[Math.floor(Math.random()*items.length)]`
`console.log(tom.style.backgroundColor)`
what I am trying to do is lets say i have 5 swatches represented by 5 elements in an array . i want to be able to have a button that allows me to randomize what colors fill each element
any help would be appreciated
element.style represent style of the element, it will only be populated if style attribute is present (aka in-line style), CSS style will not affect that object.
So, element.style.backgroundColor will be empty, unless element has style="background-color: red;" as an attribute.
If you need get actual rendered style of an element, use
window.getComputedStyle(element).backgroundColor
document.querySelectorAll("div").forEach( div =>
{
console.log("style: " + div.style.backgroundColor, "final: " + window.getComputedStyle(div).backgroundColor, div);
});
body > div[id]
{
width: 1em;
height: 1em;
background-color: green;
border: 1px solid black;
}
<div id="cap-left2"></div>
<div id="cap-left1" style="background-color: red;"></div>
<div id="cap-base"></div>
<div id="cap-right1"></div>
<div id="cap-right2"></div>
const xx = window.getComputedStyle(searchBtn).getPropertyValue('background-color')
console.log(xx)
you can access only inline css proprty values via styleproperty. You need getComputedStyle
I have a javascript variable which is returning as below;
var html = '<span id="GRID_7_2_1_1_e_4" style="left: 517px; top: 162px; height: 32px; display: block;">'
I want to get the id(GRID_7_2_1_1_e_4) of this html.
Could you help me?
Assuming you don't have jQuery, you can try this approach:
Idea:
Create an in-memory element and set your HTML string as its innerHTML.
Then navigate to necessary child in this element and fetch required attribute.
Note: This approach will only work if the supplied HTML string is valid. Also note that id should be unique. So if there are multiple elements with same id, first element will be fetched.
Sample
var html = '<span id="GRID_7_2_1_1_e_4" style="left: 517px; top: 162px; height: 32px; display: block;">'
var div = document.createElement('div');
div.innerHTML = html;
var id = div.firstChild.id;
// or
// var id = div.firstChild.getAttribute('id')
console.log(id);
// This should return `null` as `div` is an in-memory element and will not be a part of DOM tree
console.log(document.getElementById('GRID_7_2_1_1_e_4'))
It can be done with javascript regexp:
var html = '<span id="GRID_7_2_1_1_e_4" style="left: 517px; top: 162px; height: 32px; display: block;">';
var regex = /id="([^"]*)"/g;
var matches = regex.exec(html);
console.log(matches);
Do you have jQuery running in your app?
If so, than you can use:
var html = '<span id="GRID_7_2_1_1_e_4" style="left: 517px; top: 162px; height: 32px; display: block;">'
var id = $(html).attr('id');
Check this, this is exact answer to your question using only html and javascript
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var html = '<span id="GRID_7_2_1_1_e_4" style="left: 517px; top: 162px; height: 32px; display: block;">'
var test = html.match(/id="(.*)" /);
alert (test[1]);
}
</script>
</body>
</html>
I Assume that you are not using the jQuery then in this case you can use DOM Praser.
In this case I am using the Object of DOM Parser and then i am using it to convert the string into HTML element. and after converting it. I am finding the id of the element by firstchilid.id assuming that span is your first element
var htmlString = '<span id="GRID_7_2_1_1_e_4" style="left: 517px; top: 162px; height: 32px; display: block;">'
parser = new DOMParser();
doc = parser.parseFromString(htmlString, "text/xml");
console.log(doc.firstChild.id);
I'm not so good in javascript.
I have a DOM structure like this:
<div data-embed-url="https://www.youtube.com/watch?v=5DkrwfY2jw4">
<div class="black">
<div>
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.2493%;">
<iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4"></iframe>
</div>
</div>
</div>
How can I remove the node with the class "black" and the div without style and class keeping the others?
Assuming you are using ES5:
// Find the `.black`
var black = document.querySelector('.black');
// Replace `.black` with its first child
black.parentNode.replaceChild(black.firstChild, black);
You should use ID's on your div's to manipulate the DOM. ID's are meant to be unique. Using classes is discouraged as you can use class on mulitiple DOM nodes.
// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);
More information:
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
An example using your code with div ID:
// Removing a specified element when knowing its parent node
var d = document.getElementById("blackId");
var d_nested = document.getElementById("blackChildId");
var div_i_want = d_nested.innerHTML;
alert('BEFORE: ' + d.innerHTML);
var throwawayNode = d.removeChild(d_nested);
d.innerHTML = div_i_want;
alert('AFTER: ' + d.innerHTML);
<div data-embed-url="https://www.youtube.com/watch?v=5DkrwfY2jw4">
<div class="black" id="blackId">
<div id="blackChildId">
<div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.2493%;">
<iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/5DkrwfY2jw4"></iframe>
</div>
</div>
</div>
If your intention is to remove the two div elements, while keeping the nested content (in order to simplify the nesting), then you could use .replaceChild() like this:
var black = document.querySelector('div.black');
var divToKeep = black.children[0].children[0];
black.parentNode.replaceChild(divToKeep, black);
So I wrote this to take a button and recreate it as an Link with spans inside. However, I cant seem to get this to work for multiple buttons. I end up needing to copy and past the JS and enter in the different classes duplicating the entire script. There has to be an easier way to do this... Any thoughts?
Example of two buttons, and the only working solution thus far...
http://jsfiddle.net/En72J/5/
HTML
<div class="DIV_ONE">
<input type="button" class="INPUT_ONE" value="Today's Work Items 10" onclick="hAction_win1(document.win1,'CU_APPL_SUM_WRK_PERFORM_WEEKS', 0, 0, 'This Week\'s Items 10', false, true);" tabindex="16" name="CU_APPL_SUM_WRK_DATE_SEL_DAYS">
</div>
JQuery
// Page First loads Input Button Wrapped in Div.
// Grab Input Buttons Numbers ( Last 2 Characters )
var number = $('.INPUT_ONE').val().substr(-2);
// Grab Input Buttons Text, Minus the Numbers.
var term = $('.INPUT_ONE').val().slice(0, -2);
// Grab Input Buttons OnClick Value
var script = $('.INPUT_ONE').attr("onclick");
// Append 'term' Float Left
$('.DIV_ONE').append('<span class="text">' + term + '</span>');
// Append 'number' Float Right
$('.DIV_ONE').append('<span class="number">' + number + '</span>');
// Wrap Both 'term' and 'number' in an <A> LINK and set OnClick with 'script' var.
var second = $('.DIV_ONE').wrapInner('');
// Finally, Delete old Button. New <A> Link as Victor!
$('.INPUT_ONE').remove();
CSS
.btn_style {
border-bottom: 1px dotted #CCCCCC;
color: #666666;
display: block;
font-family: verdana;
font-size: 12px;
overflow: auto;
text-decoration: none;
}
.number {
background: none repeat scroll 0 0 #72716E;
color: #FFFFFF;
display: block;
float: right;
font-weight: bold;
padding: 4px;
position: relative;
width: 20px;
}
.text {
float: left;
padding: 4px;
}
Consider using a second class name to identify the elements you wish to process, then loop through them like so:
<div class="DIV_ONE buttonMe">
<input type="button" class="INPUT_ONE" value="Today's Work Items 10" onclick="hAction_win1(document.win1,'CU_APPL_SUM_WRK_PERFORM_WEEKS', 0, 0, 'This Week\'s Items 10', false, true);" tabindex="16" name="CU_APPL_SUM_WRK_DATE_SEL_DAYS">
</div>
JS:
$('.buttonMe').each(function() {
current= $(this);
// at this point "current" points to the outer DIV
currentInput = $(this).find('input')
// then you can manipulate the current input
})
Then you can treat "currentInput" as if it were the hard-coded element reference you're currently using in your code.
A simple loop would solve that :
$('input[class^="INPUT_"]').each(function() {
var n = $('<span />', {'class':'number', text : this.value.slice(-2)}),
t = $('<span />', {'class':'text', text : this.value.slice(0,-2)}),
a = $('<a />', {'class':'btn_style', onclick : $(this).attr('onclick')});
$(this).closest('div').append(a.append(n,t)).end().remove();
});
FIDDLE
You could select all inputs of type button by using
$('input:button').each( function(index) {
//do work here
});
and go through each button on your page.
create a seperate function and call the function with a selector for any number of inputs and div
function createlink(input, div) {
// Page First loads Input Button Wrapped in Div.
// Grab Input Buttons Numbers ( Last 2 Characters )
var number = $(input).val().substr(-2);
// Grab Input Buttons Text, Minus the Numbers.
var term = $(input).val().slice(0, -2);
// Grab Input Buttons OnClick Value
var script = $(input).attr("onclick");
// Append 'term' Float Left
$(div).append('<span class="text">' + term + '</span>');
// Append 'number' Float Right
$(div).append('<span class="number">' + number + '</span>');
// Wrap Both 'term' and 'number' in an <A> LINK and set OnClick with 'script' var.
var second = $(div).wrapInner('');
// Finally, Delete old Button. New <A> Link as Victor!
$(input).remove();
}
createlink('.INPUT_ONE', '.DIV_ONE');
createlink('.INPUT_TWO', '.DIV_TWO');
fiddle here
Use JQuery's $(this) and JQuery's .each.
Here's a working fiddle: http://jsfiddle.net/4jqBj/
HTML:
<div class="item">
<input type="button" class="item_btn" value="Today's Work Items 10" tabindex="16" />
</div>
<div class="item">
<input type="button" class="item_btn" value="This Week's Items 22" tabindex="16" />
</div>
JQUERY:
$(".item_btn").each(function () {
var number = $(this).val().substr(-2);
var term = $(this).val().slice(0, -2);
$(this).parent().append('<span class="text">' + term + '</span>').append('<span class="number">' + number + '</span>');
$(this).parent().wrapInner('');
$(this).remove();
});
All,
I am working on populating a div tag with text.
var centName;
centName=centName+$(this).attr('data-centerName');//tried <br/> / '\n'
$("#selOccs").text(centName.Trim(';'));
My div tag is like
<div ID="selOccs" NAME="selOccs" style="width: 350px; height: 100px;border:1px solid ;
overflow-y: scroll; scrollbar-arrow-color: blue; scrollbar-face-color: #e7e7e7; scrollbar-3dlight-color: #a0a0a0; scrollbar-darkshadow-color: #888888">
</div>
The issue is adding line breaks. I need display the centName with line breaks.so far all the values are coming in one line[ as per the code].
I tried adding <--br/--> and '\n' but itseems to be not working..
Use .html() instead of text and in the string you can then use <br/>
var centName;
centName = centName + $(this).attr('data-centerName') + '<br/>';
$("#selOccs").html(centName.Trim(';'));