i tried getting the button id, setting it as a variable and set it as inner element of a paragraph tag. but it is failing, im not sure where i messed up the process.
here is what i have done so far.
dont worry about the innerhtml being wrong, it works when i replace it with string texts. i just removed the rest so its clearer
let me know if im missing some key information. ill edit it right away
<script>
function ViewDetail(clicked_id) {
let btnid = obj.id;
document.getElementById("outme").innerHTML = btnid;
}
</script>
View
<div class="modal-body">
<p id='outme'>default id</p>
</div>
Have added Id attributes in button:
<script>
function ViewDetail(btnid) {
let btnid = obj.id;
document.getElementById("outme").innerHTML = btnid;
}
</script>
Added Id attributes:
<a id="<?=$rows['id']?>" href="view.php?id=<?=$rows['id']?>" class="btn btn-primary" onclick="ViewDetail(this.id)" data-toggle="modal" data-target="#myModal">View</a>
<div class="modal-body">
<p id='outme'>default id</p>
</div>
Related
I was trying to add the id value of active element into a url. Then using a button to redirect to the url.
HTML
<div class="icon" tabindex="0" id="company">
<img src="company.png">
</div>
<button type="submit" onclick="myFunction()">jump</button>
Javascript
function myFunction(){
var x = document.activeElement.id;
location.href = "apps-online.html?page=" + x;
}
My expectations was: when I click the button, it will redirect to page
"apps-online.html?page=company"
However, the url of the new page is
"apps-online.html?page="
I was wondering why the value of x hasn't been added to the url.
Hi, everyone. For now I have understood why this problem happened. Because every time when I click the button, the button became the last active element.
So is there any way to achieve my goal?
Do check the value of x whether it is empty or not if it is empty the value of x will be passed as empty so there is no value in the url .try debugging the code or use console.log
function myFunction(){
var x = document.activeElement.id;
console.log(x);
location.href = "apps-online.html?page=" + x;
}
this gives the value of x in the console check this.
Your button does not have an id.
Give id="company" to button element.
<div class="icon" tabindex="0">
<img src="company.png">
</div>
<button id="company" type="submit" onclick="myFunction()">jump</button>
When you click on the button, the active element is button itself. I am assuming you have several divs and you need to pass the id of the highlighted element. You need to send the id to the function in some way.
Take a look below. This can be one of the many possible solutions.
HTML
<div class="icon" tabindex="0" id="company">
<img src="company.png">
</div>
<div class="icon" tabindex="1" id="something">
<img src="something.png">
</div>
<button type="submit" onclick="myFunction()">jump</button>
JS
let tabID = null;
let icons = document.getElementsByClassName('icon');
for (icon of icons)
{
icon.onclick = function()
{
tabID = document.activeElement.id;
}
}
function myFunction()
{
window.open("apps-online.html?page=" + tabID);
}
I have two buttons, both without links, and want to add a link to one when the other is clicked. How can I make one button with an onclick give a link attribute to something else on the page? If not a button, maybe a div?
The following is my current code:
<div class="container">
<div class="jumbotron" style="background-color:#000000 !important;">
<img id="myImage" src="images/closed.png" style="width:100%">
<p id="texthere"></p>
<div class="container">
<div class="row">
<div class="col">
<button onclick="document.getElementById('myImage').src='images/open.png'" class="btn btn-primary active btn-block">Open Eyes</button>
</div>
<div class="col">
<button onclick="document.getElementById('myImage').src='images/closed.png'"class="btn btn-primary active btn-block">Close eyes</button>
</div>
</div>
</div>
Thank you in advance for your help.
*Edited to clarify and pose as a question.
I think you may be confused about how HTML links work. HTML has the a tag for elements that a user can click to go to a different URL. The (worse) alternative is to use an onclick handler to redirect the user by setting the value of window.location.
To make a button that creates a link on the page, put a script tag at the bottom of the body that attaches a listener to a button that, when called, places a link on the page.
<script type="text/javascript">
var button = document.getElementById('my-button'); // This button has to exist.
button.addEventListener('click', function() {
var link = document.createElement('a');
link.href = 'google.com'; // Or wherever you want the link to point.
document.body.appendChild(link);
});
</script>
While there are many ways to do what you want, without knowing what programming skills you have and what you want to see on the screen, perhaps this sort of structure would help you. Replace your current onclick handlers on the BUTTONs:
<button id="open" class="btn btn-primary active btn-block">Open Eyes</button>
<button id="close" class="btn btn-primary active btn-block">Close eyes</button>
<script>
document.getElementById("open").addEventListener("click", function() {
changeState('open');
});
document.getElementById("close").addEventListener("click", function() {
changeState('closed')
});
function changeState(state) {
document.getElementById("myImage").src = 'images/' + state + '.png';
var new_para = document.createElement("p");
var new_link = document.createElement("a");
new_link.setAttribute("href", "https://www.google.com/search?" + state);
var new_link_text = document.createTextNode("Search for '" + state + "'");
new_link.appendChild(new_link_text);
new_para.appendChild(new_link);
document.body.appendChild(new_para);
}
</script>
I'm trying to retrieve the ID of one element, store it as a variable and then use that ID value to interact with other elements in that section with the same ID.
<div class="mainContent">
<div class="articleContent">
<h1>header1</h1>
<p class="articlePara" id="one">para1</p>
</div>
<div class="articleFooter" id="one" onclick="readMore()">
</div>
</div>
<div class="mainContent">
<div class="articleContent">
<h1>header2</h1>
<p class="articlePara" id="two">para2</p>
</div>
<div class="articleFooter" id="two" onclick="readMore()">
</div>
</div>
And then the JS/jQuery
function readMore() {
var subID = event.target.id;
var newTarget = document.getElementById(subID).getElementsByClassName("articlePara");
alert(newTarget.id);
}
At this point I'm only trying to display the ID of the selected element but it is returning undefined and in most cases people seem to notice that jQuery is getting confused because of the differences between DOM variables and jQuery ones.
jsfiddle: https://jsfiddle.net/dr0f2nu3/
To be completely clear, I want to be able to click on one element, retrieve the ID and then select an element in the family of that clicked element using that ID value.
just remove the getElementsByClassName("articlePara"); in end of the newTarget .already you are call the element with id alert the element of the id is same with target.id
function readMore() {
var subID = event.target.id;
var newTarget = $('[id='+subID+'][class="articlePara"]')
console.log(newTarget.attr('id'));
console.log(newTarget.length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContent">
<div class="articleContent">
<h1>header</h1>
<p class="articlePara" id="one"></p>
</div>
<div class="articleFooter" id="one" onclick="readMore()">click
</div>
</div>
As you have read before, you should keep your id's unique, and you should avoid using onclick in html, but you could do it like this.
With querySelector you get the element and then with parentElement you can retrieve the parent of that element.
function readMore(el) {
var articleFooterId = el.id;
var articlePara = document.querySelector(".articleContent #"+articleFooterId);
var articleContent = articlePara.parentElement;
console.log('articleFooter', articleFooterId);
console.log('articlePara', articlePara);
console.log('articleContent', articleContent);
}
In your html you can return the 'this' object back to the function by doing readMore(this).
<div class="mainContent">
<div class="articleContent">
<h1>header1</h1>
<p class="articlePara" id="one">para1</p>
</div>
<div class="articleFooter" id="one" onclick="readMore(this)">footertext</div>
</div>
<div class="mainContent">
<div class="articleContent">
<h1>header2</h1>
<p class="articlePara" id="two">para2</p>
</div>
<div class="articleFooter" id="two" onclick="readMore(this)">footertext</div>
</div>
jsfiddle
if you're using Jquery:
$(function () {
$('div.articleFooter').click(function () {
var para = $(this).prev().find('p.articlePara').text();
alert('T:' + para);
});
})
$('.articleFooter').click(function() {
var b=subId; //can be any
var a="p[id="+b+"]"+"[class='articlePara']";
$(a).something;
});
You have forgotten to pass in event as parameter in your onclick= call in html.
In your javascript, you need to include event in the parenthesis as well.
window.readMore = function(event) {...}
if you write document.getElementById(subID).getElementsByClassName("articlePara"); That's saying you want to get your clicked element's CHILD elements that have class equal to articlePara . There is none. So you get undefined.
If you want to find all element with a ID one and a class articlePara, it can be done easily with jQuery:
newtarget = $("#one.articlePara");
You can insert a line: debugger; in your onclick handler function to trigger the browser's debugging tool and inspect the values of variables. Then you will know whether you are getting what you want.
How can I pass variable from anchor tag inside script tag to paragraph outside script?`
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<p id="test1"></p>
</div>
<div class="modal-footer">
</div>
</div>
JavaScript Code
<script>
var VARIABLE = "abc"
var container = document.getElementById("wrapper");
var url = ['url_1','url_2']
for( i=0; i<url.length; i++){
container.insertAdjacentHTML('beforeend','<img src>');
}
</script>`
You must assign the anchor tag to a variable.
var anchor = '<img src>';
And then set the value of this to the paragraph's inner HTML
document.getElementById("test1").innerHTML = anchor;
You can combine these two
document.getElementById("test1").innerHTML = '<img src>'
There is also no need to have the VARIABLE text in the paragraph. Though, with all this being said; there's no need for you to do this with javascript at all. You could just have the anchor tag inside the paragraph tag as so
<p>
<a...></a>
</p>
If this isn't what you were trying to achieve, could you please elaborate your question as it's kinda confusing.
I have a modal with a grid of buttons representing different html components. When one of the buttons is pressed, some html is supposed to be injected into the page once the modal closes. However, I'm having trouble targeting the specific column where the html is to be injected. Here's my code:
<div class="row" id="newRow">
<div class="col-md-12 column">
<button class="btn addElement" href="#" data-toggle="modal" data-target="#add-element"><i class="fa fa-plus fa-3x add-item"></i></button>
</div>
</div>
And in my js file I have some code to assign an id to the column div (since there could potentially be many columns with this addElement button) that looks like this:
...
$(this).parent().next().children().find('.column').assignId();
...
Up to this point, everything works well. I'm having no trouble getting the column a unique id (defined in my assignId() function).
As I mentioned, the addElement button gets clicked, opening a modal which is when this code is executed:
$(document).on('click', 'button.addElement', function (e) {
e.preventDefault();
$('#add-element').modal('show').draggable();
var col = $('button.addElement').parent();
// debugging in the browser verifies that the colId
// successfully stores the id attribute for the column
var colId = col.attr('id');
addElements(colId);
});
...
function addElements(colId) {
$('#insert-paragraph').on('click', function () {
var html_content = '<div class="box" data-type="paragraph">...</div>';
$("#newRow").find("#"+colId).html(html_content)
$('#add-element').modal('hide');
});
}
It's on this line: $("#newRow").find(colId).html(html_content); that I'm having the issue. My guess is that the formatting for find(...) is wrong and that I can't just insert a variable like that, but I've tried a few different things and nothing seems to be working.
Any help is very much appreciated.
Thanks!
UPDATE:
#juvian suggested writing a few of the variables' values to the console:
console.log(colId);
console.log($("#newRow")).length;
console.log($("#newRow").find("#"+colId).length);
console.log($("#newRow").find("#"+colId).html());
I logged these values twice. First, just before passing colId into the addElements function and in the addElements function immediately after $(#newRow").find("#"+colId).html(html_content); The results of those two tests are as follows:
Values prior to running addElements:
console.log(colId); = 8153-1076-641d-3840
console.log($("#newRow")).length; = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <button class="btn addElement"...>...</button>
Values after the insert-paragraph button is pressed:
console.log(colId); = 8153-1076-641d-3840
console.log($("#newRow")).length; = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <div class="box box-element" data-type="paragraph">...</div>
Interestingly enough, it appears like everything is working like I'd expect it to, however, when it's all said and done, the addElement button remains and the page still renders this:
<div id="newRow" class="row clearfix">
<div id="32aa-ab91-f50d-c3b3" class="col-md-12 column ui-sortable">
<button class="btn addElement" data-target="#add-element" data-toggle="modal" href="#">
<i class="fa fa-plus fa-3x add-item"></i>
</button>
</div>
</div>
.find as most jquery functions, takes a css selector as parametre. Unfortunately, colId is just a string, so it matches no elements (unless colId is html, span or something like that)
You are just missing adding the id selector at the beginning to do an id match:
.find("#"+colId)
I guess The parent of button is a div here which has no id.
var col = $('button.addElement').parent();
thus var colId is getting no value.give that div an id and it should be fine.