How do I make a button that can both make my paragraph have a bigger and smaller font in Java script-CodePudding

I've tried almost everything my newbie brain knows about js and nothing is yet to work. If anyone has an answer or solution that would be really helpful.

function biggerfont() {
   let bf = document.getElementById("font");
   let btn = document.getElementById('btn');

   if (bf.style.fontSize == "25px") {
           bf.style.fontSize = "100px";
            btn.innerHTML = "Smaller"
 }
 else if (bf.style.fontSize == "100 px") {
     bf.style.fontSize = "25px";    
     btn.innerHTML = "Bigger"
 }

 <p id="font" style="font-size: 25px;">Lorem Ipsum</p>

    <button type="button" id="btn" onclick="biggerfont()">Bigger</button>

CodePudding user response：

Wihtout getting into production-grade ways of doing this: You forgot a closing curly brace at the end. Also, you typed 100 px with a space instead of 100px. Correcting those will make your code work.

Now, about good practices, because you are learning and this stuff gets overlooked easily, you forgot to end two statements with semicolons. In Javascript, ending with semicolon is not required, but since you're learning it is a good learning practice to get used to semicolons, to be consistent and end every line with a semicolon. You also need to learn to keep indentation consistent, this makes your code more readable. Lastly, be consistent and use either single quotes ' or double quotes " at every string you type. Good luck in your learning journey!

function biggerfont() {
    let bf = document.getElementById("font");
    let btn = document.getElementById("btn");

    if (bf.style.fontSize == "25px") {
        bf.style.fontSize = "100px";
        btn.innerHTML = "Smaller";
    }
    else if (bf.style.fontSize == "100px") {
        bf.style.fontSize = "25px";    
        btn.innerHTML = "Bigger";
    }
}

<p id="font" style="font-size: 25px;">Lorem Ipsum</p>
<button type="button" id="btn" onclick="biggerfont()">Bigger</button>

CodePudding user response：

You may simply check if the current font-size is 25px then set it to 100px otherwise set it back to 25px.

Here's a live demo:

const fontEl = document.getElementById("font"),
  btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  fontEl.style.fontSize = (fontEl.style.fontSize == '25px' ? 100 : 25)   'px';
});

#font {
  font-size: 25px;
}

<p id="font" style="font-size: 25px;">Lorem Ipsum</p>
<button type="button" id="btn">Adjust Font Size</button>

You may build on the above demo as it only serves a small push in the right direction.

CodePudding user response：

You are missing a }. Also, remove the space in 100 px

function biggerfont() {
  let bf = document.getElementById("font");
  let btn = document.getElementById('btn');

  if (bf.style.fontSize == "25px") {
    bf.style.fontSize = "100px";
    btn.innerHTML = "Smaller"
  } else if (bf.style.fontSize == "100px") {
    bf.style.fontSize = "25px";
    btn.innerHTML = "Bigger"
  }
}

<p id="font" style="font-size: 25px;">Lorem Ipsum</p>
<button type="button" id="btn" onclick="biggerfont()">Bigger</button>

CodePudding user response：

This would be a good case for using CSS. There's a toggle method that you can use with classList that will allow you to add/remove a class from an element, and in your example you can do that within the click handler for your button.

// Cache the elements outside of the function
const para = document.querySelector('p');
const btn = document.querySelector('button');

// Add a click listener to the button that calls the
// `handleClick` function when it's fired
btn.addEventListener('click', handleClick);

// Use classList's toggle method to
// toggle between a paragraph with a bigger class
// and a paragraph without a bigger class - click once
// to add the class, and click again to remove it.
// You can also set the text content of the button
// to match the what clicking on it is meant to do next
function handleClick() {
  para.classList.toggle('bigger');
  if (btn.textContent === 'Bigger') {
    btn.textContent = 'Smaller';
  } else {
    btn.textContent = 'Bigger';
  }
}

p { font-size: 25px; }
button:hover { cursor: pointer; }
.bigger { font-size: 50px; }

<p>Lorem Ipsum</p>
<button type="button">Bigger</button>

Additional documentation