Develop Reference

Changing display from block to none for multiple textareas

I'm currently trying to figure out how to make a text area disappear while another one will appear instead.
I have no knowledge of javascript and I have just started learning the basics of HTML and CSS, is there a chance anyone from the forum can help me out or maybe guide me to the correct path.
I'm attaching the part of the code, to make it more clear.
When you click on "2.svg" it should change the "textarea.one's and three's" "display: block;" into "display: none;"
When you click on "3.svg" it should change the "textarea.two's and one's" "display: block;" into "display: none;"
When you click on "1.svg" it should change the "textarea.two's and three's" "display: block;" into "display: none;"
I hope this explanation is clear enough, I'm also not sure if I'm allowed to ask to provide full code on this forum without preparing anything on my own.
Thank you in advance to whoever will read this!
<div>
<img id="header1" src="/1.svg" alt="Open Menu" class="menu">
<img id="header1" src="/2.svg" alt="Open Menu" class="menu">
<img id="header1" src="/3.svg" alt="Open Menu" class="menu">
</div>
<div class="textniz">
<textarea class="one" id="myInput" name="myInput" readonly>
Line one
Line two
Line three</textarea>
</div>
<div class="textniz">
<textarea class="two" id="myInput" name="myInput" readonly>
Line four
Line five
Line six</textarea>
</div>
<div class="textniz">
<textarea class="three" id="myInput" name="myInput" readonly>
Line seven
Line eight
Line nine</textarea>
</div>

Read this: https://www.w3schools.com/jsref/prop_style_display.asp
In order to change an element's display property, you can access it like this:
document.querySelector("myelement").style.display = "theValueIWant";
Mind the different selectors
Now, what you want is when we click 2.svg to change textarea one and three's diplay property from block to none. First select these using document.querySelector("textarea.one") and then change the value: document.querySelector("textarea.one").style.display = "none";
Now, to call this javascript you need an event. You can use the onClick one. Simply
<img id="header1" onClick="document.querySelector('textarea.one').style.display = 'none';" src="/1.svg" alt="Open Menu" class="menu">
would change the display property of the textarea.one element on click.
Method I In order to call multiple elements, what I suggest is adding one more class to the two elements that you are going to hide, and the simply use the above code with changing the class. E.g., to textarea one and three add class hideOne and then hide the element with document.querySelector("hideOne").style.display = "none";
Method II Another way you can accomplish this, is by creating a function that would hide the two components. Create a script tag and then use the above selector to hide the two elements:
<script>
function hide1(){
document.querySelector('textarea.one').style.display = "none"
document.querySelector('textarea.three').style.display = "none"
}
</script>
Then call the function by inserting into the element to be clicked(your svg): onClick="hide1()"
That's it!

The following is a very short way of achieving the same without jQuery.
It is not as easy to read as the jQuery based solution but contains certain elements that might be interesting to you too:
I used a "delegated event attachment" which means I attached the click event handler to the parent element (the first div in the document) of the three <img> elements. Doing it this way keeps the document "fast" and makes it easily extendable by further elements.
I identify the clicked image by its id attribute: only if the clicked element has the tagName==="DIV" and its id starts with "header", I will take the remaining (id-string - 1) as the index to look-up the class name c in the cls array.
In the txtas.forEach() loop I will then make the <textarea> containing c in its classList visible, while all others will be hidden.
const cls=["one","two","three"],
txtas=document.getElementsByName("myInput");
document.querySelector("div").onclick=ev=>{ let el=ev.target;
if(el.tagName==="IMG"&&el.id.substr(0,6)==="header"){
let c=cls[el.id.substr(6)-1];
txtas.forEach(t=>t.style.display=t.classList.contains(c)?"":"none");
}
}
<div>
<img id="header1" src="/1.svg" alt="first" class="menu">
<img id="header2" src="/2.svg" alt="second" class="menu">
<img id="header3" src="/3.svg" alt="third" class="menu">
</div>
<div class="textniz">
<textarea class="one" name="myInput" readonly>
Line one
Line two
Line three</textarea>
</div>
<div class="textniz">
<textarea class="two" name="myInput" readonly>
Line four
Line five
Line six</textarea>
</div>
<div class="textniz">
<textarea class="three" name="myInput" readonly>
Line seven
Line eight
Line nine</textarea>
</div>
I removed the id attributes from your <textarea> elements as they would have been dupes. The script works very well without them.

Impossible with just CSS but so easy with JQuery (which I think would be easier fo you to start as the semantic is much more read friendly for begginers than pure javascript)
like this:
$("#header1").click(function(){
$(".two").hide();
$(".three").hide();
$(".one").show();
});
$("#header2").click(function(){
$(".one").hide();
$(".three").hide();
$(".two").show();
});
$("#header3").click(function(){
$(".one").hide();
$(".two").hide();
$(".three").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<img id="header1" src="/1.svg" alt="Open Menu" class="menu">
<img id="header2" src="/2.svg" alt="Open Menu" class="menu">
<img id="header3" src="/3.svg" alt="Open Menu" class="menu">
</div>
<div class="textniz">
<textarea class="one" id="myInput" name="myInput" readonly>
Line one
Line two
Line three</textarea>
</div>
<div class="textniz">
<textarea class="two" id="myInput" name="myInput" readonly>
Line four
Line five
Line six</textarea>
</div>
<div class="textniz">
<textarea class="three" id="myInput" name="myInput" readonly>
Line seven
Line eight
Line nine</textarea>
</div>

So as per your question, if it is just a quick switch and you want only one view to be active, it's better and easy to use jQuery because it is very direct, #Alvaro has already shared the quick code snippet. It's very easy to play around with jQuery.
Disclaimer: It makes your life so easy that if in case you try to learn a full seasoned framework, then there will be a long workaround. But get started with jQuery. You'll find it very interactive.
Happy Coding :)

Handling button mdl-js styling with dynamic innerHTML change

Changing <button> innerHTML seems to deactivate mdl-js-ripple-effect.
Use the method mentioned here to dynamically build a new element as the workaround or report this as a bug?
<body>
<button id="myButton" class="mdl-button mdl-js-button mdl-js-ripple-effect">OLD VALUE
</button>
</body>
JS:
window.addEventListener("load", () => {
document.getElementById("myButton").innerHTML = "new value";
});
http://codepen.io/anon/pen/KVvMOE
Tried the componentHandler.upgradeElement(button) on the existing element after setting new html, but as mentioned in the docs it's only good for new ones. Trying to reuse existing elements.

I when the component is parsed and upgraded by the MDL script, a lot of extra attributes are added to the outer node, and extra HTML added inside. That means both that setting the innerHTML will remove some of the necessary markup inside and that the upgradeElement will fail because of the markup that was added to the outer node.
You should try de-upgrading the button with componentHandler.downgradeElements first, then set the innerHTML, then call componentHandler.upgradeElement.
Some untested sample code:
function setText(element,newtext){
componentHandler.downgradeElements(element);
element.innerHTML=newtext;
componentHandler.upgradeElement(element);
}
setText(document.getElementById('myButton'),'new value');

I'm having a similar issue. I'm trying to add some card via innerHtml into the page. The card contains a radio button using the class mdl-radio.
Everything seems to work fine, but the radio button doesn't load the style. I'm seeing a simple radio button not the styled one. If I add the card to the page from the beggining the radio button looks OK, as expected.
Any comment is welcome, I'm not sure how to fix this.
main.innerHTML = '<!-- CARD PREGUNTA-->\
<div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet" style="margin: 0 auto; display: none;" id="pregunta_card">\
<div class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">\
<!-- Contenido -->\
<div class="mdl-card__supporting-text mdl-color-text--grey-600">\
<h2 class="mdl-card__title-text" id="pregunta_card_title"></h2>\
<br>\
<br>\
<!-- Radio Button 1 -->\
<label id="opt1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option1">\
<input type="radio" id="option1" class="mdl-radio__button" name="options"/>\
<!-- intitial state checked using attribute checked -->\
<span class="mdl-radio__label" id="option1_value"></span>\
</label>\
</div>\
</div>'

Traversing in jquery through multiple elements

So I am trying to traverse through multiple elements and I seem to be having a problem. I have 2 divs that have two child elements each - an input and a link. Inside the link there is also an image. When I click on the input button of the first div, I want to be able to traverse to it's sibling(the link{a tag}) and into the links child(the img tag) and get its source attribute which I will then use to change the image of the second div. Here's an excerpt of the code
HTML:
<div id="item">
<img src="img/deli/1.jpg" alt="Owl Image" id="homeimage">
<input type="submit" id="btn1" class="btn btn-default dropdown-toggle viewbuttons" value="View Item" onclick='changeImage( "img/deli/1.jpg" );'>
</div>
<div class="item">
<img src="img/deli/2.jpg" alt="Owl Image" id="homeimage">
<input type="submit" id="btn" class="btn btn-default dropdown-toggle viewbuttons" value="View Item" onclick='changeImage( "img/deli/2.jpg" );'>
</div>
JQUERY:
$(document).ready(function(e){
$('input#btn1').on('click', function(){
var changeThis = $('input#btn1').siblings('#yeezy').children('img').attr('src');
$("#homeimage").attr("img", changeThis);
})
});
Thank you in advance

IDs must be unique. ID selector only selects the first matching element in the document. You are getting/setting src attribute of one element, i.e. both $('input#btn1').siblings('#yeezy').children('img') and $("#homeimage") refer to the same element.
Either use different IDs or use class attributes. Also note that since IDs must be unique, $('input#btn1').siblings('#yeezy') doesn't make a lot of sense. You could simply select the element using an ID selector: $('#yeezy');

There are a few things off with your code. You use the id "homeimage" twice, but there should only ever be one of a given id. You have the onclick attributes set to a different function besides the one you want to run, so you should remove those. Finally, when you try to change the src attribute of the homeimage, you call the function on the img attr: ("img", changeThis);
Make sure that all of your ID's are unique, remove any onclick atrributes from your elements, and then replace:
$("#homeimage").attr("img", changeThis);
with:
$('#homeimage').attr('src', changeThis);

BootstrapX popover and close button

I'm developing Joomla 2.5 site with template based on Twitter Bootstrap v2.1.1.
I'm also using BootstrapX - clickover, a Bootstrap extension to allow popovers to be opened and closed with clicks on elements instead of hover or focus: https://github.com/lecar-red/bootstrapx-clickover.
In popover I'm calling a HTML file with simple AJAX currency converter.
This is HTML which triggers popover with currency converter:
<a class="pretvornik withajaxpopover" href="#" rel="clickover" title="Pretvornik valut" data-load="http://www.cheaperandmore.com/files/static_converter.html">Click here</a>
This is content of the HTML file (http://www.cheaperandmore.com/files/static_converter.html):
<p>V okence vpišite znesek v britanskih funtih, ki ga želite preračunati v eure.</p>
<div id="currencyBox">
<div class="currencyInner">
<div class="data">
<input type="text" name="znesek" id="znesek" value="1" /><span id="gbpsign">£</span>
</div>
<div class="data">
<select name="fromCurrency" id="fromCurrency">
<option selected="" value="GBP">GBP</option>
</select>
</div>
<div class="data">
<select name="toCurrency" id="toCurrency">
<option value="EUR">EUR</option>
</select>
</div>
</div>
<div style="currencyInner" id="calcresults"></div>
<div class="clr"> </div>
<div class="data">
<input class="btn btn-primary" type="button" name="convert" id="convert" value="Pretvori »" />
<button class="btn" class="clickover" data-toggle='button' data-dismiss="clickover">Zapri</button>
</div>
</div>
This is javascript:
<script type="text/javascript">
//Add close button to bootstrap popovers
$('[rel="clickover"]').clickover();
//Load data
$('.withajaxpopover').bind('click',function(){
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.unbind('click').popover({content: d}).popover('show');
});
});
</script>
Right now when I click on a link which triggers popover, two popovers appear.
One popover has content from static_converter.html, but it's missing clickover class "popover fade right in".
Other popover, which is hidden behind first one has correct class "popover clickover fade right in", but it has no content except title which is taken from a.pretvornik.withajaxpower title tag.
So when I click close button in the first popover it actually closes second popover (because it has clickover class).
I can't figure out what I'm I doing wrong.
You can see it here: http://www.cheaperandmore.com (click on the "£ » €" in the first semicircle in the top left part of the page).
Any help would be appreciated.

It appears the plugin is inheriting from the Twitter Bootstrap popover plugin : it means you don't need to call .clickover() if you call .popover() (or rather the opposite).
You should try that
<script type="text/javascript">
//Load data and bind clickover
$('.withajaxpopover').on('click.ajaxload',function(){
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.off('click.ajaxload').clickover({content: d}).clickover('show');
});
});
</script>
I took the liberty of changing bind and unbind to on and off because it's preferred since 1.7.
I also added an event name click.ajaxload to avoid conflict, but you should look into .one() because it does the unbinding for you.
If you have clickovers that don't have the ajax loading part, you should make two separate selectors and enable the clickover plugin differently on each.
You can for example remove the rel="clickover" attribute on the .withajaxpopover elements, and keep both $('[rel="clickover"]').clickover(); and the code above.

Is there a simple Javascript command that targets another object?

I have a page with two divs in it, one inside the other like so:
<div id='one'>
<div id='two'></div>
</div>
I want div one to change class when it is clicked on, then change back when div two is selected.
I'm completely new to javascript, but I've managed to find a simple command that makes div one change when I click it.
<div id='one' class='a' onclick="this.className='b';">
<div id='two'></div>
</div>
Now I just need an equally simple way to change div one back when number two is clicked.
I've tried changing "this.className" to "one.classname," and for some reason that worked when I was working with images, but it doesn't work at all with divs
<div id='one' class='a' onclick="this.className='b';">
<div id='two' onclick="one.className='a';">
This does not work.
</div>
</div>
Essentially I'm wondering if there is a substitute for the javascript "this" that I can use to target other elements.
I've found several scripts that will perform the action I'm looking for, but I don't want to have to use a huge, long, complicated script if there is another simple one like the first I found.

You can use document.getElementById
<div id='two' onclick="document.getElementById('one').className='a'; return false;">
This does not work.
</div>

This would work:
document.getElementById('one').className = 'a';

you could get the element by id with:
document.getElementById("one")