I wanted to display variable value in alert box.
please see below code :
<script>
function check() {
var content = document.getElementById("one").value;
alert(content);
}
</script>
<body onload="check()">
<div style="position: absolute; z-index: 9; width: 450px; top: 38px; margin-left: 176px;">
<style>
div#layout {
margin:0px;
padding:px;
width:450px;
margin:0px auto;
overflow:hidden;
}
</style>
<div id="layout">
<span id="one" style="display:none" ph="layout1" class="ione">yes</span>
<span id="two" style="display:none" ph="layout1" class="ione">no</span>
</div>
</div>
</body>
When i am executing this code then it is showing value as undefined in alert box.
value in span id"one"is changing in different different situation.
i want to track every time...so i cant hardcode it.
can you please help in this?
spans not have the value in html
one is the id for span tag
in javascript use
document.getElementById('one').innerText;
in jQuery use
$('#one').text()
function check() {
var content = document.getElementById("one").innerText;
alert(content);
}
or
function check() {
var content = $('#one').text();
alert(content);
}
$(document).ready(function(){
// alert("test");
$("#name").click(function(){
var content = document.getElementById("ghufran").innerHTML ;
alert(content);
});
//var content = $('#one').text();
})
there u go buddy this code actually works
Try innerText property:
var content = document.getElementById("one").innerText;
alert(content);
See also this fiddle http://fiddle.jshell.net/4g8vb/
Clean way with no jQuery:
function check(some_id) {
var content = document.getElementById(some_id).childNodes[0].nodeValue;
alert(content);
}
This is assuming each span has only the value as a child and no embedded HTML.
document.getElementById('one').innerText;
alert(content);
It does not print the value;
But, if done this way
document.getElementById('one').value;
alert(content);
Related
When the user clicks a tag, I want to add append text to textarea using class name.
Click event handler works,but not adding text to the textarea.
Here's the code I have so far.
var boardName;
$(document).ready(function() {
$('.js-open-card-composer').click(function() {
boardName = document.title.replace(' | Trello', '');
$('.list-card-composer-textarea').text += boardName;
});
});
And, Here's the text area
<textarea class="list-card-composer-textarea js-card-title" style="overflow: hidden; word-wrap: break-word; height: 36px;"></textarea>
Thanks!
jQuery text() is function so instead of
$('.list-card-composer-textarea').text += boardName;
use
var data = $('.list-card-composer-textarea').text();
$('.list-card-composer-textarea').text( data + boardName);
Use html instead of text
var boardName;
$('.js-open-card-composer').click(function() {
boardName = 'test';
var data = $('.list-card-composer-textarea').html();
$('.list-card-composer-textarea').html(data+boardName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="list-card-composer-textarea js-card-title" style="overflow: hidden; word-wrap: break-word; height: 36px;"></textarea>
<div class="js-open-card-composer" style="width:20px;height:20px;border:1px solid red"></div>
I need something like a fill in the blanks sheet for children. When people click the ------ (dashes) it should turn into a textbox, and people can type it. after that when they move from that element after typing, it should turn into the text that they entered inside that text box.
I really dono how to approach this problem. I tried the following code, but what happens is, i am unable to type inside the text box. The cursor is not appearing at all
<html>
<head>
<title>NSP Automation</title>
<script src ="jquery.min.js">
</script>
</head>
<body>
<div class="container">
My Name is = <span id="name">__________<span>
</div>
<script>
$(document).on('click', '#name', function(){
document.getElementById("name").innerHTML = "<input type=\"text\">";
});
</script>
</body>
</html>
any pointers on how to achieve this ?
Thanks,
Since you've set the listener on the whole document, you will be recreating the input-tag with every click. Try something like:
$('#name').on('click', function(){
this.innerHTML = "<input type=\"text\">";
$('#name').off('click')
}
After clicking on the span-element, you remove the listener on it again, and you should be able to type.
http://jsfiddle.net/218rff9v/
Here is an example that generates the wished behaviour for all spans in your container. Some details can be improved but I think it's working as expected.
function convertSpanToInput() {
// Insert input after span
$('<input id="tmp_input">').insertAfter($(this));
$(this).hide(); // Hide span
$(this).next().focus();
$("#tmp_input").blur(function() {
// Set input value as span content
// when focus of input is lost.
// Also delete the input.
var value = $(this).val();
$(this).prev().show();
$(this).prev().html(value);
$(this).remove();
});
}
$(function() {
// Init all spans with a placeholder.
$(".container span").html("__________");
// Create click handler
$(".container span").click(convertSpanToInput);
});
Here is an html example with which you can test it:
<div class="container">
My Name is = <span></span>. I'm <span></span> years old.
</div>
JsFiddle: http://jsfiddle.net/4dyjaax9/
I'd suggest you have input boxes and don't do any converting
Simply use CSS to remove the borders and add a dashed border bottom
input[type=text]{
border:none;
border-bottom:1px dashed #777;
} <!-- something like that -->
add a click handler to add a edited class, so you can remove the bottom border
input[type=text].edited{
border:none;
}
That way you don't need to replace html elements, you just style them to look different
Why not use text input and only change CSS classes?
CSS:
.blurred{
border-style: none none solid none;
border-width: 0px 0px 1px 0px;
border-bottom-color: #000000;
padding: 0px;
}
.focused{
border: 1px solid #999999;
padding: 3px;
}
JavaScript:
$('#nameInput').focus(function(){
$(this).removeClass('blurred').addClass('focused');
});
$('#nameInput').blur(function(){
$(this).removeClass('focused').addClass('blurred');
});
HTML:
<div class="container">
My Name is = <span id="name"> <input id="nameInput" type="text" class="blurred"></input> <span>
</div>
Check this jsfiddle:
http://jsfiddle.net/gwrfwmw0/
http://jsfiddle.net/we6epdaL/2/
$(document).on('click', '#name', function(e){
if( $("#myText").is(e.target))
return;
$(this).html("<input type='text' id='myText' value='"+ $(this).html() +"'>");
});
$(document).on("blur", "#name", function(){
$(this).html( $("#myText").val() );
});
Here is my print function.
function printContent() {
var myWindow = window.open('', '', 'width=600,height=700')
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = some text;
myWindow.document.body.innerHTML = newstr;
myWindow.print();
myWindow.close();
}
html:
<div>
<div id="text"> </div>
<div id="images"></div>
</div>
I try to print only 'text' on page not the entire page but after preview, dynamically loaded images to 'images' div disappear. I can't solve this with update panels. Have you got any idea?? Thanks.
Use image as a background to its outer div instead of using image tag. Hope this helps. Please check the below code for reference.
.bg__image {
background: url('./images/dummy_image.png') center center no-repeat;
background-size: 100%;
height: 100px;
width: 100px;
float: left;
}
<div class="bg__image"></div>
I try to print only 'text' on page not the entire page ...
If you want to take out specific parts of the page from print version, use #media print CSS rules:
#media print {
#images {
display: none;
}
}
hi Guys I need help with catching a img tab in side of the p tag
this is my html
<p>
<img style="max-width: 100%; margin-left: auto; margin-right:
auto; display: block;"
src="../content_platform_node/content_primitive/51e4c3e29306e2581000000a/blob"
alt="" data-lscp-resource-mimetype="image/jpeg"
data-lscp-resource-id="51e4c3e29306e2581000000a" />
</p>
what I need is to wrap the img tab with a tag instead of p tag , note this is not pre-generated its user input content therefore I need to do this with jquery or javascript
help needed
You can try something like
var parent = $('img').parent();
parent.wrap('<div />').contents().unwrap()
and the div can be any other tag
var image = $('img[data-lscp-resource-id="51e4c3e29306e2581000000a"]');
image.parent('p').replaceWith($('<a></a>').html(image));
Fiddle
EDIT: raw js:
var image = document.getElementsByTagName('img')[0];
var oldParent = image.parentNode;
var newParent = document.createElement('a');
newParent.appendChild(image);
oldParent.parentNode.appendChild(newParent);
oldParent.parentNode.removeChild(oldParent);
Fiddle
Basically, I'm trying to make a link that, when pressed, will hide the current body div tag and show another one in its place, unfortunately, when I click the link, the first body div tag still appears. Here is the HTML code:
<div id="body">
<h1>Numbers</h1>
</div>
<div id="body1">
Body 1
</div>
Here is the CSS code:
#body {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
}
#body1 {
height: 500px;
width: 100%;
margin: auto auto;
border: solid medium thick;
display: hidden;
}
Here is the JavaScript code:
function changeDiv() {
document.getElementById('body').style.display = "hidden"; // hide body div tag
document.getElementById('body1').style.display = "block"; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked"; // display text if JavaScript worked
}
NB: CSS tags are declared in different files
Have you tried
document.getElementById('body').style.display = "none";
instead of
document.getElementById('body').style.display = "hidden";?
just use a jquery event listner , click event.
let the class of the link is lb... i am considering body as a div as you said...
$('.lb').click(function() {
$('#body1').show();
$('#body').hide();
});
Use the following code:
function hide {
document.getElementById('div').style.display = "none";
}
function show {
document.getElementById('div').style.display = "block";
}
You can Hide/Show Div using Js function. sample below
<script>
function showDivAttid(){
if(Your Condition)
{
document.getElementById("attid").style.display = 'inline';
}
else
{
document.getElementById("attid").style.display = 'none';
}
}
</script>
HTML -
Show/Hide this text
Set your HTML as
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
And now set the javascript as
function changeDiv()
{
document.getElementById('body').hidden = "hidden"; // hide body div tag
document.getElementById('body1').hidden = ""; // show body1 div tag
document.getElementById('body1').innerHTML = "If you can see this, JavaScript function worked";
// display text if JavaScript worked
}
Check, it works.
Consider using jQuery. Life is much easier with:
$('body').hide(); $('body1').show();
try yo write
document.getElementById('id').style.visibility="hidden";