div into array using map function - javascript

I m adding child divs of main div into array by id
but couldn't get what is the problem.......?
after adding into array i waant to send to ajax to write in csv
<!DOCTYPE html>
<html>
<body>
<p>Click the button to convert the array into a String.</p>
<div id='main'>
<div id='a'>
dab
</div>
<div id='b'>
nav
</div>
</div>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var array = $('#main id').map(function() {
return $(this).val();
}).get();
array.toString();
document.getElementById("demo").innerHTML = array;
}
</script>
</body>
</html>

Try to use attribute selector properly,
var array = $('#main [id]').map(function() {
return $(this).text();
}).get();
Also .val() is a jquery function is specially for the elements which yields value property when accessing it on a node object. So when you want to access the content inside a div, you have to use .text()

Related

take div's id by referencing this

Hello everyone im trying to get the id of a div through a function in javascript like this:
<div id="txtHint" onload="getId(this);"></div>
The function is located just before </body> tag of my html page
function getId(theId) {
var name = document.getElementById(theId);
}
In the body of my html page i have a button:
<button type="button" onclick="alert(getId())">get</button>
I receive an undefined alert on clicking
How do i get the div's id?
Anyone can help?
Though I don't know the use case of this, you can pass the id to the function and return that from the function:
function getId(theId) {
var name = document.getElementById(theId);
return name.id;
}
<div id="txtHint"></div>
<button type="button" onclick="alert(getId('txtHint'))">get</button>
Update: If you want to get all id's by tag, simple pass the tag to the function and get all the id's of those element:
function getId(el) {
var element = document.querySelectorAll(el);
var id = [...element].map(i=>i.id).filter(i=>i);
return id;
}
<div id="txtHint1">First</div>
<div id="txtHint2">Second</div>
<div id="txtHint3">Third</div>
<div id="txtHint4">Fourth</div>
<button type="button" onclick="alert(getId('div'))">get</button>
The way your functions is written the only way is to have global variable
var divId = null;
function getId(div) {
divId = div.id;
}
function getId() {
alert(divId);
}
And here is my suggetions on doing it
First way is to "mark" the div at onload event and get the id of it using this "mark"
function markDiv(thisDiv) {
thisDiv.classList.add('mark')
}
function getMarkedDiv() {
var div = document.querySelector('.mark');
alert(div.id);
}
<div id="Mark" onload="markDiv(this)" class="mark"></div>
<button onclick="getMarkedDiv()">button</button>
Another way is to wrap the button and the div inside one parent
function getMySiblingId(button) {
alert(button.parentElement.firstElementChild.id);
}
<div id="Parent">
<div id="Mark"></div>
<button onclick="getMySiblingId(this)">Button</button>
</div>
Or the easiest way is to wrap button inside the desired div
function getId(btn) {
alert(btn.parentElement.id);
}
<div id="Mark">
<button onclick="getId(this)">Click me</button>
</div>
<div id="Alice">
<button onclick="getId(this)">Click me</button>
</div>
<div id="Charlie">
<button onclick="getId(this)">Click me</button>
</div>
Of course in all this scenarios i didn't assume that you want to get ids of multiple divs
so i remade the code
function divField(theDivFieldId) {
var name = document.getElementById(theDivFieldId);
return name.id;
}
html
<div id="txtHint" onload="alert(divField(this));"></div>
and nothing happens

getElementById("demoname").value return undefine

My JS code return undefined. The tag is goog, but value is missing. why?
<body>
<p id = "demo">fffffffff</p>
<button onclick = "fun()">click</button>
<script type="text/javascript" defer = "defer">
function fun(){
alert(document.getElementById("demo").value);
}
</script>
</body>
p tag doesn't have a value. It have textContent. Only input elements have value attribute
<body>
<p id = "demo">fffffffff</p>
<button onclick = "fun()">click</button>
<script type="text/javascript" defer = "defer">
function fun(){
alert(document.getElementById("demo").textContent);
}
</script>
</body>
YOu need to alert the innerHTML, not the value
<body>
<p id = "demo">fffffffff</p>
<button onclick = "fun()">click</button>
<script type="text/javascript" defer = "defer">
function fun(){
alert(document.getElementById("demo").innerHTML);
}
</script>
</body>`
<p> tag is not having value. You can choose to use textContent, innerHTML or innerText. All of these has benefits and limitations.
If you only want text written in <p> then you should use textContent
textContent is not supported in IE8 or earlier
Example
<p id=“demo”><ul><li>mytext</li></ul></p>
var x=document.getElementById(“demo”);
var output = x.textContent;
Output
mytext
If you want text with Html (like UL, LI ) from <p> then you should use innerHTML
var output = x.innerHTML;
Output
mytext
innerHTML is supported by all browsers
You can also use innerText.
innerText will not include text that is hidden by CSS, but textContent will
So choose as per your requirement.
Try using the .innerHTML property instead.
alert(document.getElementById("demo").innerHTML);

how to generate dynamic id using variable and delete the element using the same variable

Hi i am creating a small web application where if i click create element it should create new button using variable x. When i click the remove element it should delete from the last element until no new element should be there.
But the problem is when i click create element i am not able to add id to the newly created element dynamically.At the same time how can i delete using variable as id to delete new element.
Here element means Button
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
var x=1;
var fd,d;
$(document).ready(function(){
$("#r").click(function(){
$("#fd").remove();
});
$("#c").click(function(){
var txt="<div id='fd"+x+"'><button > New Button </button></div>";
x++;
$("#d").after(txt);
});
});
</script>
</head>
<body>
<button id="c">Create Element</button>
<button id="r">Remove Element</button>
<br> <br>
<div id="fd">
<button id="d">First Element</button>
</div>
<br>
</body>
</html>
I have included the image where i am able to create new element but not able to delete it
Thanks in advance.
Add a common class to each new element and then use last() filter with that class to remove the last one
var x = 1;
var fd, d;
$(document).ready(function() {
$("#r").click(function() {
$(".button").last().remove();
});
$("#c").click(function() {
var txt = "<div class='button' id='fd" + x + "'><button > New Button </button></div>";
x++;
$("#d").after(txt);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="c"> Create Element </button>
<button id="r"> Remove Element </button> <br>
<br>
<div id="fd">
<button id="d"> First Element </button>
</div>
<br>

access the exact view in a raw using js

My view has a button and the view is looped.so it has raws.
when i click the button of a single raw i need to color that button.
so i added a onclick="select_Button(<?php echo $rawID?>)" to the raw's button in my view
select_Button is my funtion in js
function select_Button(rawNumberOfVote) {
var RawNumber = rawNumberOfVote;
alert ("Form submitted successfully" + RawNumber);
var upVote = document.getElementById("up_vote");
upVote.style.background = "green";
}
like above i send the rawID to the funtion.
how can i edit this line to accept the view called up_vote in that particular raw id that i got from parameter.
var upVote = document.getElementById("up_vote");
becuz if i only use this line it will color the first raw's button instead the one i wanted
Thank you
you can use data attribute in your html referencing to this page and this page. and retraive with this this jquery code snippet:
$("[data-test ='my value']")
or this code snnipet in javascript:
document.querySelectorAll(".example").find(function(dom){
return dom.dataset.test == "expected-value"
});
Update:
accourding to this page querySelectorAll return nodeList and NodeList are not array and we cannot use find method so I change my answer to this code:
<html>
<body>
<div class="post" data-key="1">
<lable>test</lable>
<button type="button" onclick="upvote(1)">up vote</button>
</div>
<div class="post" data-key="2">
<lable>test</lable>
<button type="button" onclick="upvote(2)">up vote</button>
</div>
<div class="post" data-key="3">
<lable>test</lable>
<button type="button" onclick="upvote(3)">up vote</button>
</div>
</body>
</html>
<script type="text/javascript">
var upvote = function(id) {
var nodes = document.querySelectorAll(".post");
console.log(nodes.length);
for(i = 0 ; i < nodes.length ; i++){
console.log(nodes[i].dataset.key);
if (nodes[i].dataset.key == id)
nodes[i].style.backgroundColor = "red";
}
};
</script>

replace all images with inputs elements jquery

i need find all images from textarea value and then replaces with inputs text elements
and the value of those with the src of the img was reemplace
after that the final string is output on a new div ('#newDiv')
my script dont replace nothing i dont know why
here is what i have done so far,
<html>
<head></head>
<body>
<textarea id="caja"></textarea>
<input type="button" onClick="parsingHtml()" value="read">
<div id="newDiv"></div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
function parsingHtml()
{
var content = $('#caja').val();
var newContent = $(content).find("img").replaceWith('<input type="text">');
alert(newContent)
$('#newDiv').html(newContent);
};
</body>
</html>
any ideas? thanks in advance!
There are 2 problems that I can see
newContent is referring to only the img elements, not the complete content
Since you are passing the value to jQuery, if the value does not start with < it will be considered as a selector not as a element creation command
So
//dom ready handler
jQuery(function($) {
//click event handler registration
$('#read').click(parsingHtml);
})
function parsingHtml() {
var content = $('#caja').val();
var newContent = $('<div />', {
html: content
});
newContent.find("img").replaceWith('<input type="text">');
console.log(newContent)
$('#newDiv').html(newContent.contents());
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="caja"></textarea>
<input type="button" id="read" value="read">
<div id="newDiv"></div>

Categories

Resources