We Keep Coding

Button to add content to other page

I'm trying to make a POS system with HTML, CSS and Javascript.
I currently have a site that loads in the inventory to an iframe and from there I want the buttons from the iframe to add their information such as "Name, price, amount etc." to another div.
Is this possible?
I already tired linking the target and such, but nothing worked.
Index page:
<wrapper>
<div id="category">
<a href="øl_soda.html" target="iframe1">
<input type="button" class="categories_button" value="Øl/Soda" />
</a>
<a href="drinks.html" target="iframe1">
<input type="button" class="categories_button" value="Drinks" />
</a>
<a href="shot.html" target="iframe1">
<input type="button" class="categories_button" value="Shots" />
</a>
<a href="diverse.html" target="iframe1">
<input type="button" class="categories_button" value="Diverse" />
</a>
</div>
<iframe name="iframe1" id="inventory" src="velkommen.html">
</iframe>
<div id="checkout">
<ul id="myList">
<li>
Ja
</li>
</ul>
<button onclick="remove()">Remove</button>
<button onclick="reset()">Reset</button>
</div>
</wrapper>
Site open in iframe:
<script>
function add_rynkeby() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Rynkeby");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
function add_cocio() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Cocio");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
function remove() {
var list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
</script>
<script>
function reset() {
var list = document.getElementById("myList");
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
}
</script>
<wrapper>
<button onclick="add_rynkeby()" class="inventory_button" target="index.html">Rynkeby</button>
</wrapper>
So I want the buttons from the iframe site to display it's name into the "checkout" div on the index page.

To have the page in the iframe communicate information to the parent page, use the postMessage API. MDN page is https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage but searching for "postmessage api" will turn up many guides.
The general idea is:
the iframed page's JS sends a message when the button is clicked
the parent page's JS listens for messages, and responds in some way when it recognizes a received message as coming from the iframe
That "recognizes a received message as coming from the iframe" is an important security point: you'll need to set things up so that the parent page only trusts the messages you intend it to trust. Most guides to the API will cover that.

I want to get url from the same document using JS onclick method

I'm trying to get url from some links. If I click on the google link, output should be google.com and for other links should be the same. But I don't know how to do that. Sorry I'm too new to programming. Help me out please.Thank you
My code is here, please guide me well for this task. Thanks again...`
<script>
function get_url() {
document.getElementById("field1").value = document.getElementById("url").value;
}
</script>
<a onclick="get_url()" target = "_blank" id = "url" href="http://www.google.com/">Google </a> <br/>
<a onclick="get_url()" target = "_blank" id = "url" href="http://www.facebook.com/">Facebook </a><br/>
<a onclick="get_url()" target = "_blank" id = "url" href="http://www.twitter.com/">Twitter </a><br/>
<a onclick="get_url()" target = "_blank" id = "url" href="http://www.youtube.com/">Youtube </a><br/><br/>
URL : <input type="text" id="field1"><br><br>
<p>Click on the link above to get the URL of the linked document.</p>

You were almost there - there were just a few issues.
Firstly, you can't have multiple elements with the same ID. IDs should be unique, but you don't actually need them in this instance. Instead I changed it to pass the link into get_url() as a parameter, and then used that to get the href value and insert it into the text box.
Finally, I added return false; to the function, in order to stop the links actually triggering a page change.
function get_url(link) {
document.getElementById("field1").value = link.href;
return false;
}
<a onclick="get_url(this)" target="_blank" href="http://www.google.com/">Google </a> <br/>
<a onclick="get_url(this)" target="_blank" href="http://www.facebook.com/">Facebook </a><br/>
<a onclick="get_url(this)" target="_blank" href="http://www.twitter.com/">Twitter </a><br/>
<a onclick="get_url(this)" target="_blank" href="http://www.youtube.com/">Youtube </a><br/><br/>
URL : <input type="text" id="field1"><br><br>
<p>Click on the link above to get the URL of the linked document.</p>

Find previous <a> element?

SOMEUSERNAME
<div class="col s9">
<p id="p_50">Some message</p>
<br>
<br>
<span class="forumtools">
<strong>
<a onclick="quote(\'p#p_50\')">Quote</a>
</strong>
<span class="right">Written SOMEDATE</span>
</span>
</div>
JQuery/JS:
function quote(post) { $(post).text(); }
This works to fetch the posts message, but how do I go about finding the Username?
I have tried using $(post).prev('a').text();, and $(post).parent().prev('a').text();, but nothing seems to work.

You can do it without jQuery. If possible, change the html and pass the current link to the function, like this:
<a onclick="quote(\'p#p_50\', this)">Quote</a>
Then you can just search through all links:
function quote(str, currentLink) {
var allLinks = document.getElementsByTagName("a"); // get all links in document
var index = allLinks.indexOf(currentLink);
if (index > 0) {
var prevLink = allLinks[index-1];
console.log(prevLink); // log it to browser console
} else {
console.log("there is no previous link");
}
}

By looking at the DOM structure, it should work with $(post).parent().prev().text().
Alternative way, how about you wrap all of them with <div>, like this: XD
<div id="message1">
SOMEUSERNAME
<div class="col s9">
<p id="p_50">Some message</p>
<br>
<br>
<span class="forumtools">
<strong>
<a onclick="quote(\'#message1\')">Quote</a> //change to wrapper id
</strong>
<span class="right">Written SOMEDATE</span>
</span>
</div>
</div>
then to get the post text: $(post).find('#p_50').text();
to get the username: $(post).find('a:first').text();

Looking at your sample HTML, if you're at p, just go to parent element and get the closest a and you should be fine:
function quote(post) {
var post = $(post).text();
var user = $(post).parent().closest('a').text();
}

Perhaps using parent() and then previous()
var ancortext = $(post).parent().prev().text();
A function example below.
function username(post) {
return $(post).parent().prev().text();
}
Note: This smells to me, your code is very much tied into the structure of the HTML this way. If you alter the HTML, chances are your javascript will break.
I have copied your code into my own HTML document, and confirmed that the jquery method calls above output the desired result. If you are not, then something is different with your source HTML and the source that you posted, or your jquery functions differ from the ones stated in this answer :)

your onclick attribute is wrong,because onclick accept javascript,so the value could be support js,then onclick="quote('p#p50')".
function quote(post) {
var subject = $(post).text();
var user=$(post).parent().prev('a').text();
console.log('posted '+subject+' by '+user);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
SOMEUSERNAME
<div class="col s9">
<p id="p_50">Some message</p>
<br>
<br>
<span class="forumtools">
<strong>
<a onclick="quote('p#p_50')">Quote</a>
</strong>
<span class="right">Written SOMEDATE</span>
</span>
</div>

How do I change the image in a navbar based on what the active url is?

What I'm trying to do is have #navbar-image-id2games be toggled when the active url is index.html. I attempted to do this with javascript like so, but it doesn't seem to be working.
HTML:
<div class="navbar-item" id="navbar-item-ID2Games">
<a href="index.html" id="index-url">
<div class="navbar-image" id="navbar-image-unhovered">
</div>
<div class="navbar-image" id="navbar-image-id2games">
</div>
<br>
<div class="navbar-text">
ID2 Games
</div>
</a>
</div>
Javascript:
$('#index-url').active(function() {
$('#navbar-image-id2games').toggle();
$('#navbar-image-unhovered').hide();
});
JSFiddle: https://jsfiddle.net/zxsmuaae/

You can check whether or not the user is at index.html by doing:
if (window.location.href.match(/index\.html/)) {
// toggle
}

You can check the url with an if statement, and then set the visibility to hidden if it is on a certain page.
var navimg = document.getElementById("navbar-image-id2games");
if(window.location.href === "http://example/index.html"){
navimg.style.visibility = "hidden";
}
If you want it to be reverse where it is hidden only when it is not on index.html, you can replace === with !==.

jQuery find closest

I'm trying to get the a href of an list item.
HTML
<div class="popup" style="display: none;">
<div class="product">
<div class="photo">
<a href="" class="sendkleur" id="link69"> <!-- href im trying to reach -->
<img id="product-collection-image-69" src="" alt="Test kleur" class="popup-image69">
</a>
</div>
<a href="" class="sendkleur" id="link69">
<strong>Test kleur</strong>
</a>
<span class="swatchLabel-category">Kleur:</span>
<p class="float-clearer"></p>
<div class="swatch-category-container" style="clear:both;" id="ul-attribute137-69">
<img onclick="listSwitcher();" src="" id="a137-32" class="swatch-category" alt="Beige" width="12px" height="12px" title="Beige">
<img onclick="listSwitcher();" src="" id="a137-36" class="swatch-category" alt="Zwart" width="12px" height="12px" title="Zwart">
</div>
<p class="float-clearer"></p>
</div>
</div>
There are multiple popups on the site and thats what makes it difficult. At first I used this code
var link = jQuery('.photo').find('a')[0].getAttribute("href");
But this ofcourse only returns the href of the first popup. Then I tried this code:
var link = jQuery('.photo').closest('a').attr("href");
But this returned undefined
Then I tried this:
var link = jQuery(this).closest('a').attr("href");
But that also returns undefined
Edit
Here is the whole jQuery code snippet
jQuery(document).ready(function(){
jQuery('.swatch-category-container img').click(function(){
var kleur = jQuery(this).attr('title');
var link = jQuery('.photo').find('a').attr("href");
console.log(link);
link += "?kleur="+kleur;
console.log(link);
jQuery('.photo').find('.sendkleur').attr("href", link);
});
});

Working from the .swatch-category-container img element, you can traverse the DOM to find the required a like this:
$('.swatch-category-container img').click(function() {
var link = $(this).closest('.popup').find('.photo a').prop('href');
// do something with link here...
});

If this is the .swatch-category-container img element then, the anchor is the previous to previous sibling of the ancestor swatch-category-container element
var link = jQuery(this).closest('.swatch-category-container').prev().prev().attr("href");

Since you said multiple popups, the idea would be like this.
1. Get all popups
2. From each popup in all popups
Get the photo href item
$('.popup').each(function() {
var hrefItem = $(this).find('.photo a').attr('href');
//Do your processing with href item
});