Toggle button back to default html - javascript

I'm trying to change the innerHTML of my button back to default. It works with changing the innerHTML the first time, but then I can't get it back to default.
I've tried using booleans to toggle back and forth, but my code just won't execute the second part of the function.
function money() {
var money = document.getElementById('money');
var text = "normal";
if (text == "normal") {
money.innerHTML = "<h1>Let me ask you</h1><p>Does this work<p>";
text = "changed";
} else {
money.innerHTML = "<h1>Money Laundering</h1><p>Click For More Info</p>";
text = "normal";
}
}
<div id="practiceContainer">
<h1 id="practiceHeader">Practice Areas</h1>
<div class="lawgrid">
<button class="practicesBox" id="money" onclick="money()">
<h1>Money Laundering</h1>
<p>Click For More Info</p>
</button>
</div>
</div>
I expected my code to change back to default html, but it doesn't happen.

You set the text variable to "normal" at the beginning of the function, therefore when your code reaches your if logic, text will always be "normal".
Consider simply moving the text variable outside of your function, so that it doesn't keep resetting with each click.
var text = "normal";
var btnMoney = document.getElementById('money');
function money() {
if (text == "normal") {
btnMoney.innerHTML = "<h1>Let me ask you</h1><p>Does this work<p>";
text = "changed";
} else {
btnMoney.innerHTML = "<h1>Money Laundering</h1><p>Click For More Info</p>";
text = "normal";
}
}
<div id="practiceContainer">
<h1 id="practiceHeader">Practice Areas</h1>
<div class="lawgrid">
<button class="practicesBox" id="money" onclick="money()">
<h1>Money Laundering</h1>
<p>Click For More Info</p>
</button>
</div>
</div>

Related

JavaScript condition not taking into account the variable defined within a function

I'm trying to append text within an HTML file, but only when is_sum_1 == true. I want the user to select something from a dropdown box before the conditional text gets appended, but the if statement seems to only become satisfied when var is_sum_1 = true; is outside of the function.
JavaScript function:
function dropDownListener(input_id, output_id) {
var dropDown = document.getElementById(input_id);
var is_sum_1 = true;
dropDown.onchange = function() {
document.getElementById(output_id).innerHTML = dropDown.value;
}
dropDownListener('sum_1', 'print_sum_1');
Printing output and conditional text in HTML:
<div id="summary">
<span id="print_sum_1"></span>
<script>
if (is_sum_1) {
$('#summary').append("I'm trying to append text if condition met")
}
</script>
</div>

How do i make this shopping list that has an add product button and an empty button

I try to make a cart page with 'empty cart' button and 'add to cart' button. I want to make the list so it adds under each other. In my code each time I press "add to shopping cart" it comes right beside each other with no spaces(instead of coming on the next line). What should I do?
How do I also make an 'empty cart' button once I have all the products added, is there a method to remove all the nodes in the cart using a function?
window.onload = start;
function start()
{
console.log('start');
}
function addTo()
{
document.getElementById("output").innerHTML += document.getElementById("txtProduct").value;
}
function empty()
{
}
<label>Product</label> <input type="text" id="txtProduct">
<button onclick="addTo()">Add to shopping cart</button>
<button onclick="empty()">Empty cart</button>
<p id="output"></p>
Check this out:
window.onload = start;
function start()
{
console.log('start');
}
function addTo()
{
var product = document.createElement("p");
product.innerText = document.getElementById("txtProduct").value;;
document.getElementById("wrapper").appendChild(product);
}
function empty()
{
document.getElementById("wrapper").innerHTML = "";
}
<label>Product</label> <input type="text" id="txtProduct">
<button onclick="addTo()">Add to shopping cart</button>
<button onclick="empty()">Empty cart</button>
<div id="wrapper">
<p id="output"></p>
</div>
I added a wrapper div so you could clean it on "empty" action.
Also I used the JS createElement function to create a <p> element for each product, it's more clean and right than adding just text to element's innerHTML. That makes them line-seperated, too...
Just change your addTo function like this:
function addTo() {
var elem = document.createElement("p");
elem.innerHTML = document.getElementById("txtProduct").value;
document.getElementById("output").appendChild(elem);
document.getElementById("txtProduct").value = "";
}
What this does is that every time you call the function, you create a p element with the value of txtProduct, it then appends the elem to the DOM and clear the value of txtProduct so you do not have to clear it manually each time you enter a value.
Then, change your empty function:
function empty() {
document.getElementById("output").childNodes.forEach((node) => {
node.innerHTML = "";
})
}
This is the jsbin test

Javascript... Why will this not go into the else section of the if statement?

See here on codepen...
[https://codepen.io/johnstonf/pen/qBbbpaV?editors=1011]
Javascript... Why will this not go into the else section of the if statement when the condition variable shows it should. It works the first time (click the button), but the second time, it should reverse function, to clear the clipboard, but it does the if section again.
<div id="fj33">
<h5>Sensitive Data For Clipboard</h5>
<p>Sensitive Data Line 2</p>
</div>
<div id="fj34">
<h5>Clipboard Cleared</h5>
<p>Sensitive Data Gone</p>
</div>
<button id="fjCopyTxtButton" class="btn btn-primary" onclick="copyText()">Copy Text to Clipboard!!</button>
<script type="text/javascript">
function copyText() {
fjChk=fjCopyTxtButton.innerHTML.includes("COPIED");
console.log("CURRENT-(Before-IF):",fjChk);
if(fjChk != "true")
{
console.log("CURRENT1:",fjChk);
//console.log("...now false");
var range, selection, worked, fj, fj2;
fj=document.querySelector('#fj33');
fj2=fj.innerText
console.log(fj2);
var copyhelper = document.createElement("textarea");
copyhelper.className = 'copyhelper'
document.body.appendChild(copyhelper);
copyhelper.value = fj2;
fj3=copyhelper.value;
copyhelper.select();
document.execCommand("copy");
document.body.removeChild(copyhelper);
document.querySelector('#fjCopyTxtButton').style.backgroundColor='yellow';
document.querySelector('#fjCopyTxtButton').style.color='red';
document.querySelector('#fjCopyTxtButton').innerHTML = '<h3>Text COPIED</h3>';
} else {
console.log("CURRENT2:",fjChk);
console.log("...now true in else section");
fj=document.querySelector('#fj34');
fj2=fj.innerText
console.log(fj2);
var copyhelper = document.createElement("textarea");
copyhelper.className = 'copyhelper'
document.body.appendChild(copyhelper);
copyhelper.value = fj2;
fj3=copyhelper.value;
copyhelper.select();
document.execCommand("copy");
document.body.removeChild(copyhelper);
document.querySelector('#fjCopyTxtButton').style.backgroundColor='green';
document.querySelector('#fjCopyTxtButton').style.color='black';
document.querySelector('#fjCopyTxtButton').innerHTML = '<h3>Text CLEARED</h3>';
}};
</script>
if (fjChk != "true")
You're checking for the string "true", but fjChk is not a string. You need to check for a boolean.
if (fjChk !== true)
or
if (!fjChk)

appending User entered text using createTextNode method

Right now I am trying to figure out how to append CREATED text to a CREATED p element depending on what a user enters into an input text field.
If I set the text after the createTextElement method, it displays just fine when I click the button. BUT what I want is: the user enters text in the input field and then upon clicking the button, the text get's added to the end of the div tag with the id of "mydiv". Any help is appreciated.
HTML:
<body>
<div id="mydiv">
<p>Hi There</p>
<p>How are you?</p>
<p>
<input type="text" id="myresponse">
<br>
<input type="button" id="showresponse" value="Show Response">
</p>
<hr>
</div>
</body>
JAVASCRIPT:
var $ = function(id) {
return document.getElementById(id)
}
var feelings = function()
{
$("myresponse").focus();
var mypara = document.createElement("p");
var myparent = $("mydiv");
myparent.appendChild(mypara);
var myText = document.createTextNode($("myresponse").value);
mypara.setAttribute("id", "displayedresponse");
mypara.appendChild(myText);
$("displayedresponse").appendChild(myText);
}
window.onload = function() {
$("showresponse").onclick = feelings;
}
You need to apply an argument to createTextNode function
You need to read the value of the input field so you can see the text.
Since you will reference mydiv on every click, i think moving mydiv variable to parent scope will suit you better
var $ = function (id) {
return document.getElementById(id)
}
let mydiv = $('mydiv');
$("showresponse").addEventListener('click', feelings);
function feelings() {
let textInput = $('myresponse').value;
var mypara = document.createElement("p");
var myText = document.createTextNode(textInput);
mypara.setAttribute("id", "displayedresponse");
mypara.appendChild(myText);
mydiv.appendChild(mypara);
$("displayedresponse").appendChild(myText);
}

Set HTML div value using JavaScript

I have an HTML page with 2 divs (among other things) - "person" and "person-success", in which "person" is visible and "person-success" hidden. When a button in "person" is clicked, the visible div hides and the previously-hidden div "person-success" shows. The code is given below:
<div id="person">
<br><br>
<div id="counterNum" class="counter-color" l10nID="M_AC_UT_TXT_20"></div>
<div role="form">
...
<button type="submit" id="addPerson" class="btn btn-success" l10nID="M_LG_BTN_1"></button>
</div>
</div>
<div id="person-success" class="hide">
...
<p>
<span l10nID='M_AC_UT_TXT_19'></span>
You can add <span id="limit"></span> more people. <a href='<?php echo $root; ?>edituseraccount.php?action=addPerson'>Add another person?</a>
</p>
</div>
The JavaScript:
$('#addPerson').click(function() {
var counter = 0;
var limit = 10;
var args = {
...
$.post("addperson.php",args,function(data){
var response = JSON.parse(data);
if(response.status == 0){
counter += 1;
if (counter < limit){
$('#counterNum').text(counter);
$('#person').hide();
$('#limit').text(limit-counter);
$('#person-success').show();
}
}
console.log(data);
});
});
Now, when the button is pressed, while "person-success" will show, clicking on "Add another person?" should show "person" and hide "person-success" again. Only this time, the div "counterNum" should be updated with the value of "counter" from the JavaScript. With my code, clicking the link reopens the "person" div and hides the other, but counterNum is not updated, or even shown. Does anyone know how I could do that?
I hope I could explain my problem. Would be grateful for any help!!
Var counter Make it as global. Because each time when you click on the addPerson button when counter resets to zero.
var counter = 0;
var limit = 10;
$('#addPerson').click(function() {
var args = {
...
$.post("addperson.php",args,function(data){
var response = JSON.parse(data);
if(response.status == 0){
counter += 1;
if (counter < limit){
$('#counterNum').text(counter);
$('#person').hide();
$('#limit').text(limit-counter);
$('#person-success').show();
}
}
console.log(data);
});
});
The variable you declare is local scope.
Declare variable globally outside the click event called.
On each click it resets counter to 0.
Hope it helps !!!

Categories

Resources