i want to print specific div by javascript. it is working fine when printed without any html tag. but when use any html
tag like p, h1 or h2 it is printed blank page.
here is my code
#extends('layout.master')
#section('content')
<div class="separator-breadcrumb border-top">
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header bg-secondary" style="padding: 7px 1.25rem">
<div class="row">
<div class="col-md-1">
<button onclick="printDiv('printMe')" class="btn btn-danger font-weight-700"> Print
</button>
</div>
</div>
</div>
<div id="printMe" >
<div class="card-body">
<h1>
Print this only
</h1>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('JScript')
<script>
function printDiv(divID) {
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML = divElements;
window.print();
document.body.innerHTML = oldPage;
}
</script>
#endsection
try formating your code so it doesn't parse as HTML (replacing the '<' closing tags character with the unicode < ; , and also placing it within a tag, to preserve white space:
// try changing from this :
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML = divElements;
// to this :
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML = '<pre>' + divElements.replace(/</g, '<') + '</pre>';
Related
I have the following HTML:
<div class="container">
<h1 class="heading">heading</h1>
<p class="paragraph">test</p>
<h2 class="subheading">123</h2>
<a class="link">321</a>
</div>
How can I wrap the last three elements within .container, so that the output looks like this:
<div class="container">
<h1 class="heading">heading</h1>
<div class="subcontainer">
<p class="paragraph">test</p>
<h2 class="subheading">123</h2>
<a class="link">321</a>
</div>
</div>
It would be better to do it within the HTML, but in case due to some constraints that you can't modify the HTML, you can do the followings
const container = document.querySelector('.container');
const subcontainer = document.createElement('div');
const lastThree = Array.from(container.children).slice(-3);
subcontainer.classList.add('subcontainer');
// move the elements into the subcontainer
lastThree.forEach(node => {
subcontainer.appendChild(node);
});
container.appendChild(subcontainer);
<div class="container">
<h1 class="heading">heading</h1>
<p class="paragraph">test</p>
<h2 class="subheading">123</h2>
<a class="link">321</a>
</div>
The class name container is quite generic, make sure that you only select the container element you want, or else you might modify other elements unintentionally.
old_html = document.getElementsByClassName("container")[0];
firstChild = old_html.children[0];
old_html.removeChild(firstChild);
new_html = "<div class='container'>"+ firstChild.outerHTML + "<div class = 'subcontainer'>" + old_html.innerHTML + "</div></div>";
console.log(new_html);
<div class="container">
<h1 class="heading">heading</h1>
<p class="paragraph">test</p>
<h2 class="subheading">123</h2>
<a class="link">321</a>
</div>
I am trying to get first letter of firstname and lastname from a div and paste it in another div but it is pasting the same value in all divs and not taking unique value from each div.
Working Fiddle: https://jsfiddle.net/bv7w8dxg/1/
Issue Fiddle: https://jsfiddle.net/bv7w8dxg/
var takword = $('.nameholder').text().split(' ');
var text = '';
$.each(takword, function () {
text += this.substring(0, 1);
});
$('.avatarholder').text(text);
Markup
`
John Doe
<div class="main-holder">
<div class="nameholder">Kyle Davis</div>
<div class="avatarholder"></div>
</div>
<div class="main-holder">
<div class="nameholder">Seim Seiy</div>
<div class="avatarholder"></div>
</div>
<div class="main-holder">
<div class="nameholder">Momma Boy</div>
<div class="avatarholder"></div>
</div>`
You are using class selectors, which selects all elements with the given class name. That's why you have all the elements set with same value
You need to wrap your elements then process each row independently
I updated your code snippet to demonstrate this:
$('.row').each(function() {
var takword = $('.nameholder', this).text().split(' ');
var text = '';
$.each(takword, function () {
text += this.substring(0, 1);
});
$('.avatarholder', this).text(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="nameholder">John Doe</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Kyle Davis</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Seim Seiy</div>
<div class="avatarholder"></div>
</div>
<div class="row">
<div class="nameholder">Momma Boy</div>
<div class="avatarholder"></div>
</div>
I'm trying to create a few elements with class names to have a number on the end that increments by 1 for each new element. E.g. <div class='someClass1'></div>, then <div class='someClass2'></div>, <div class='someClass3'></div>, etc...
However, I can only get the child elements to have incrementing class names, e.g. <span class='0'>here</span>, <span class='1'>here</span>, <span class='2'>here</span>, etc, which is done by changing the inner HTML.
How can I get the parent 'someClass' to have incrementing class numbers? I tried newNode.classList.add("someClass + noAdded"); but returns a syntax error. Thanks for any help here - my code is as follows:
var testy = document.getElementById('testy'); // <div id='testy'></div>
var noAdded = 0;
function addToPage() {
var newNode = document.createElement("div"); // <div></div>
newNode.classList.add("someClass"); // <div class='someClass'></div>
newNode.innerHTML = '<span class="' + noAdded + '">here</span>'; // <span class='0'>here</span>
testy.appendChild(newNode); // <div id='testy'><span class='0'>here</span></div>
noAdded++;
}
addToPage();
addToPage();
addToPage();
Results in:
<div id="testy">
<div class="someClass">
<span class="0">here</span>
</div>
<div class="someClass">
<span class="1">here</span>
</div>
<div class="someClass">
<span class="2">here</span>
</div>
</div>
Concatenate the value of the variable noAdded to the string someClass.
Change
newNode.classList.add("someClass");
To
newNode.classList.add("someClass"+noAdded);
var testy = document.getElementById('testy'); // <div id='testy'></div>
var noAdded = 0;
function addToPage() {
var newNode = document.createElement("div"); // <div></div>
newNode.classList.add("someClass"+noAdded); // <div class='someClass'></div>
newNode.innerHTML = '<span class="' + noAdded + '">here</span>'; // <span class='0'>here</span>
testy.appendChild(newNode); // <div id='testy'><span class='0'>here</span></div>
noAdded++;
}
addToPage();
addToPage();
addToPage();
.someClass0{color:red;}
.someClass1{color:green;}
.someClass2{color:blue;}
<div id="testy">
</div>
I implemented a chatroom by HTML and Javascript recently.
I don't know how to append the message(class="chat self") to the "chat-container" when I click the button "Send".
Here is the code:
<div id = "chat-container" class="chat-container">
<div class="chat friend">
<div class="user-photo"><img src="images/james.jpg"></div>
<p class="chat-message">How are you?</p>
</div>
<div class="chat self">
<div class="user-photo"><img src="images/curry.jpg"></div>
<p class="chat-message">Fine, thx!</p>
</div>
<div class="chat friend">
<div class="user-photo"><img src="images/james.jpg"></div>
<p class="chat-message">How old are you?</p>
</div>
</div>
<div class="chat-form">
<textarea id="myTextarea" placeholder="Type your message"></textarea>
<button onclick="sendMes()">Send</button>
</div>
My idea is like this:
<script>
function sendMes() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
vara data =
'<div class="chat self">
<div class="user-photo"><img src="images/curry.jpg"></d-wiv>
<p class="chat-message">Fine, thx!</p>
</div>';
data.chat-message = x;
document.getElementById("chat-container").appendChild(data);
}
</script>
I've read a lot of articles about HTML DOM, but they only tell how to change the .innerHTML...
I don't know how to create an div object with class="chat self", and set the object's chat-message to the value in the textarea.
Thanks a lot!
Instead of appending a DOM element to #chat-container you are simply appending a string to it (and that too seems to be malformed)
Maybe you should checkout W3School
A sample implementation of the sendMes() could be like
function sendMes() {
var message = document.getElementById("myTextarea").value // maybe try to sanitize it if you are sending it to server
var messageEl = document.createElement('p')
messageEl.innerHtml = message;
messageel.className = "chat-message"
var userImage = new Image()
userImage.src = "images/curry.jpg"
var imageContainer = document.createElement("div")
imageContainer.appendChild(userImage)
imageContainer.className = "user-photo"
var container = document.createElement("div")
container.appendChild(imageContainer)
container.appendChild(messageEl)
container.className = "chat self"
document.getElementById("chat-container").appendChild(container)
}
It might sound stupid , but i didn't find the correct way to achieve this . I want to create an element(in our example a div element) and add to it the textarea value . In my example it seems that the element is created but i cant embed it into the #notesPosition . I achieve this with JQuery but i`am not sure whats the best way to do it with pure Javascript.
var notesPositionToAdd = document.getElementById('notesPosition');
var notesTextareaBtn = document.getElementById('btnAddNotes');
notesTextareaBtn.addEventListener('click', function(e) {
e.preventDefault();
var notesTextarea = document.getElementById('addNotesTextarea').value;
console.log(notesTextarea);
var newEl = document.createElement('div');
newEl.append(notesTextarea);
newEl.className += " col-lg-2";
console.log(newEl);
});
<div class="row ">
<div class="col-lg-4 col-md-4 col-sm-4 col-12 offset-md-8 ">
<form id="newNoteForm">
<div class="form-group offset-lg-6">
<i class="fa fa-times text-md-right " aria-hidden="true"></i>
<label for="addNotesTextarea">Add notes !</label>
<textarea class="form-control" id="addNotesTextarea" rows="3"></textarea>
<input class="btn btn-danger btn-sm" type="submit" value="Add" id="btnAddNotes">
</div>
</form>
</div>
</div>
<div class="row" id="notesPosition">
</div>
Hello
Check if this helps:
newEl.append(notesTextarea);
newEl.className += " col-lg-2";
console.log(newEl);
to:
newEl.append(notesTextarea);
newEl.className += " col-lg-2";
notesPositionToAdd.append(newEl);
console.log(newEl);
I hope it helped you!
If you want to addTextNode() then you can...
var div = document.createElement('div');
var txt = document.createTextNode('Whatever Text');
div.appendChild(txt);
alternatively
var div = document.createElement('div')
div.innerHTML = 'Whatever Text' // Whatever text parsed, <p>Words</p> is OK
alternatively
var div - document.createElement('div')
div.textContent = 'Whatever' // Not parsed as HTML