We Keep Coding

NWJS JS script not functioning right

Im using JS to make divs display as block or none onclick of certain inputs. When i only have it working for one input the scripts work find, but as soon as i impliment the code for the second input it glitches out and both buttons open up the div thats only supposed to work for the second button.
Some of my code:
<span name="FaviconSPAN" id="FaviconSPAN" class="FaviconSPAN" OnClick="showOrHide()">
<img src="ASSETS/IMAGES/FAVICON1.png" alt="FAVICON" name="FaviconPNG" id="FaviconPNG" class="FaviconPNG" />
</span>
<div name="SoftMenuWrapper1" id="SoftMenuWrapper1" class="SoftMenuWrapper1">
<input type="button" value="Favorites" name="SoftMenuInput1" id="SoftMenuInput1" class="SoftMenuInput1" ONCLICK="ShowAndHide()" />
<div name="SoftMenuContent1" id="SoftMenuContent1" class="SoftMenuContent1">
Link 1
Link 1
Link 1
</div>
</div>
<script type="text/javascript">
var faqPage = document.getElementById('SoftMenuContent1');
function showDiv() {
faqPage.style.display = "block";
}
function closeDiv() {
faqPage.style.display = "none";
}
function showOrHide() {
if (faqPage.style.display === "block") {
closeDiv()
}
else {
showDiv()
}
}
</script>
<SCRIPT>
function ShowAndHide() {
var x = document.getElementById('SectionName');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</SCRIPT>

First off the markup looks kinda messy. You don't need to add an ID, name, and class to everything. Only add those things if you need them.
name is rarely used, it's a way to connect to HTML elements. Like connected radio dials. You probably don't need this at all in this code.
class this should only be used if you need to add a specific CSS classname to adjust the styles. If you are not doing that, don't include it.
id should be assigned to a unique value that only occurs once on the page. it can be used to auto-scroll to that position of the page if the url contains #whatever and that matches an element with id="whatever". Though it is more commonly used just to target a specific element in your JavaScript. If you aren't doing either of those things, don't add it.
Another problem you have is order of execution. You can either define your JS first (<script> at the top) and then reference the functions with onclick in the HTML, or (more commonly), define your HTML first with ID's, then have your <script> at the bottom targeting the IDs (document.getElementById('asdf')).
Here is a cleaner version of your code.
<span id="faviconContainer">
<img src="assets/images/favicon1.png" alt="Image of an icon" />
</span>
<div>
<input type="button" value="Favorites" id="softMenuInput" />
<div id="faqPage">
Link 1
Link 2
Link 3
</div>
</div>
<script type="text/javascript">
/**
* Takes in an ID to find an element on the page, then shows/hides it.
*
* #param {string} id The element's ID
*/
function toggle (id) {
var el = document.getElementById(id);
if (el.style.display === 'block') {
el.style.display = 'none';
} else {
el.style.display = 'block';
}
}
var faviconContainer = document.getElementById('faviconContainer');
var softMenuInput = document.getElementById('softMenuInput');
faviconContainer.addEventListener('click', function () {
toggle('faqPage');
});
softMenuInput.addEventListener('click', function () {
toggle('sectionName');
});
</script>
This question isn't related to NW.js at all. It's just basic HTML and JavaScript.
I recommend you follow these resources to improve your skills. You can also rely on the world's largest programming community (HTML/JS) to ask these questions. Then when you have NW.js specific things, you can ask those here.
https://marksheet.io - HTML/CSS/Sass
https://freeCodeCamp.org - JavaScript

How to show two forms using two buttons in html

I'd like to create a page that allow users to create keys in a database. To do that, the user have first to choose between two buttons. Each button display a different form.
My problem is the next one : I can use ONE button that show ONE form. Here is the code from https://stackoverflow.com/a/16196022/12533349 :
HTML:
<button id="some_id">Hide div</button>
<form id="some_form">
<form>
javascript:
<script type="text/javascript">
var theButton = document.getElementById('some_id');
theButton.onclick = function() {
document.getElementById('some_form').style.visibility='hidden';
}
</script>
But what I would like to do is the next thing :
if the user click on button_a, it show form_a, if he clicks on button_b, but the form_a is displayed, the form_a is hidden and the form_b is displayed. I hope it's more or less understandable...
Before concluding this post, I'd like to add a precisition : I use BootStrap 4 to construct my webapp.

You could use something like this for it.
var form1 = document.getElementById('form1');
var form2 = document.getElementById('form2');
// Hide the two forms when the page loads
form2.style.display = "none";
form1.style.display = "none";
// Create a function that shows and hides the forms
function showForm(x){
if(x==1){ /* Check what form should be shown */
form1.style.display = "block";
form2.style.display = "none";
}else if(x==2) {
form1.style.display = "none";
form2.style.display = "block";
}
}
<button onclick="showForm(1)">Form 1</button><button onclick="showForm(2)">Form 2</button>
<form id="form1">
<h3>Form 1</h3>
Example 1: <input placeholder="Example"/>
</form>
<form id="form2">
<h3>Form 2</h3>
Example 2: <input placeholder="Example"/>
</form>
In the code above, I used style.display, but you could also use style.visibility.

You stopped in the middle of the work, you had almost reached the goal. :)
However, returning to us, I think it's more elegant to use a class to add and remove in this way:
let theButton = document.getElementById('btn_id');
let theButton2 = document.getElementById('btn_id_2');
let element = document.getElementById('some_form');
let element2 = document.getElementById('some_form_2');
theButton.onclick = function() {
if(element.classList.contains('hidden')) {
element.classList.remove('hidden');
element2.classList.add('hidden');
}
}
theButton2.onclick = function() {
if(element2.classList.contains('hidden')) {
element2.classList.remove('hidden');
element.classList.add('hidden');
}
}
Remember to write your .hidden class with visibility: hidden

A toggle function for different buttons

I'd like to make two different buttons in vanilla JavaScript that, when clicked one after the other, display a different text message.
Any advice in reorganising the code below? Thanks.
I could find a toggle function for one button but not for different buttons.
index.html
<button onclick="revealMessageUk()"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>
<button onclick="revealMessageSpain()"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>
<p id="hiddenMessageUk" style="display:none">Hello!</p>
<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>
index.js
function revealMessageUk() {
document.getElementById('hiddenMessageUk').style.display = 'block';
}
function revealMessageSpain() {
document.getElementById('hiddenMessageSpain').style.display = 'block';
}
I'd like to not only display like hereafter but have a sort of a toggle function (hide/show or add/remove feature) for the two foreign languages below.

try
function revealMessage(msg) {
hiddenMessage.style.display='block';
hiddenMessage.innerText=msg;
}
<button onclick="revealMessage('Hello!')"><li><img class="flag-pictures" src="images/uk.svg" id="1" alt='UK'/></li></button>
<button onclick="revealMessage('¡Hola!')"><li><img class="flag-pictures" src="images/spain.svg" id="3" alt='ES'/></li></button>
<p id="hiddenMessage" style="display:none"></p>

Here is a way to toggle, but also keep it flexible when more locales will be added. You keep a sort of a selectedLocaleId "state" and change it when one of the buttons is clicked with the corresponding locale id.
let selectedLocaleId;
function selectLocale(newSelectedLocaleId) {
// If there is a selected locale id, un-select it
if (selectedLocaleId) {
document.getElementById(selectedLocaleId).style.display = 'none';
}
// set the new selected locale id
selectedLocaleId = newSelectedLocaleId;
document.getElementById(selectedLocaleId).style.display = 'block';
}
<button onclick="selectLocale('hiddenMessageUk')"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>
<button onclick="selectLocale('hiddenMessageSpain')"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>
<p id="hiddenMessageUk" style="display:none">Hello!</p>
<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>
Hope this helps :)
Cheers

show/hide item using javascript

I have developed a 3D model using JavaScript.
I need to show/hide a specific item in the model using a checkbox.
In the html file the checkbox has implemented.
<div id= "shower" class="row-shower" /div>
<input type="checkbox" id="show-shower" />
<label for="show-shower"> show/hide shower </label>
In the JS file, called the function:
var elem = document.getElementById('shower'),
showshower = document.getElementById("show-shower");
showshower.checked = true;
showshower.onchange = function() {
elem.style.display = this.checked ? 'cubicle' : 'none';
};
showshower.onchange();
CSS code:
.cubicle {
display:block;
}
.hideCubicle {
display:none;
}
The current issue I'm facing is when click the show/hide checkbox the whole model is gone. I just need the shower to be disappear. Not the whole model.
Any suggestion how to perform this?

var elem = document.getElementById('shower');
showshower = document.getElementById("show-shower");
showshower.onchange = function ()
{
elem.classList = this.checked ? 'cubicle' : 'hideCubicle';
};
http://jsfiddle.net/2kan1r80

You can change try code see
$(document).ready(function(){
$(".show-content").hide();
$('.check').change(function() {
if($(this).is(":checked")) {
$(".show-content").show();
}
else{
$(".show-content").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<label>Show/Hide</label>
<input type="checkbox" class="check">
<div class="show-content">
I have developed a 3D model using JavaScript.
I need to show/hide a specific item in the model using a checkbox.
In the html file the checkbox has implemented.
</div>

I found the solution.
I just add the following code to the JS file.
if(checked){
pSpec.cubicle.visible=false;
console.log("hide");
}
else
{
pSpec.cubicle.visible=true;
console.log("show");
}
You might wonder where the pSpec variable come from. That's the variable which I used to create partitions in the model. I did not share the whole code because it is lot of coding.

Javascript get string value in a tag

I have a question about how to read the string betweena tag, for example.
Devices connecting to HOME <a onclick="kmt_Toggle('BOX01', this)" class="cs_answer_link" value="[Show me how to download and install my map..]">[Show me how to download and install my map..]</a><br />
<br />
<div class="cs_answer_secondAccordion" id="BOX01" style="display: none;">
Steps for downloading and installing a map...
</div>
My code a simple, when users click on the a tag, the div class will show, and change Show me how to download and install map string in a tag to Close. When users click again, the current "close" will become "original long text". My main issue is that How i can read the string between a tag, thanks. I can not use JQuery
function kmt_Toggle(obj, aTag) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
//var tagString=document.ge(aTag).valueOf();
// aTag.innerHTML='[more..]';
aTag.innerHTML= tagString;
}
else {
el.style.display = '';
aTag.innerHTML='[close..]';
}
}
Hello Guys, thanks.
I think i have not made my question crystal clear. I want to build a toggle function in this Javascript, if people clicks on a tag, for instance,
<a onclick="kmt_Toggle('BOX01', this)" class="cs_answer_link" value="[Show me how to download and install my map..]">[Show me how to download and install my map..]</a>
It will show my div if my div has style = none; and change Show me how to download and install map into "close"
Steps for downloading and installing a map...
If people click on the link again, it will go back to the "show me how to download and installl map" and hide my div.
I tried to build something by following idealmachine solution. It does not work.
Cheers,
Qing

You can use:
getElementsByTagName("tagName")[0].firstChild.nodeValue;
or:
getElementsById("id")[0].firstChild.nodeValue;

First of all, the value attribute of an a element is not officially standardized by the W3C. You don't need it.
That said, some lines of code that might work are:
// innerHTML way
aTag.originalInnerHTML = atag.innerHTML; // to save the innerHTML
aTag.innerHTML = '[close..]'; // to add new link text
aTag.innerHTML = aTag.originalInnerHTML; // to restore the innerHTML
// W3C DOM way
// Save
var cur = aTag.firstChild;
aTag.oldChildNodes = [];
while(cur) {
aTag.oldChildNodes.push(cur);
cur = cur.nextSibling;
}
// Add new link text
while(aTag.lastChild) aTag.removeChild(atag.lastChild);
aTag.appendChild(document.createTextNode('[close..]'));
// Restore
while(aTag.lastChild) aTag.removeChild(atag.lastChild);
for(var i = 0; i < aTag.oldChildNodes.length; ++i) {
aTag.appendChild(aTag.oldChildNodes[i]);
}
Or you could do either of these instead, similar to how you are switching the accordion sections on and off:
Insert both link texts into the HTML, then use CSS display: none; to switch off the one you do not want.
Switch between entire a elements using CSS display: none;.

you can use the
documentElement. getElementsByTagName( "div" )
you have do define after if you want the first element or second etc
like so
documentElement. getElementsByTagName( "div" ).item(0).innerHtml;
will give you the innehtml of the first occurance of div
or if you have an id
documentElement. getElementsById('idname')

Maybe:
return document.getElementById(<your div name>).innerHtml;

I found out a way. I change my javascript like that
function kmt_Toggle(obj, aTag) {
var el = document.getElementById(obj);
//Save original Store at the firs time.
if(!aTag.originalInnerHTML)
{
aTag.originalInnerHTML=aTag.innerHTML;
}
if (el.style.display != 'none' ) {
el.style.display = 'none';
aTag.innerHTML= aTag.originalInnerHTML;
}
else if( el.style.display =='none'){
el.style.display = '';
aTag.innerHTML='[close..]';
}
}"
//First I store aTag text string into a variables