question in JavaScript Uncaught type error ("" is not a function ) [duplicate]-CodePudding

I want to change body color, font color and link color with functions in JS.

function bodyBackgroundColor(color){
    var target = document.querySelector('body')
    target.style.backgroundColor=color
}

function bodyColor(color){
    var target = document.querySelector('body')
    target.style.color=color
}

function linkColor(color){
    var link = document.querySelectorAll('a')
    var i = 0
    while (i<link.length) {
        link[i].style.color=color
        i = i 1
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Night MOde Final</title>
    <link rel="stylesheet" href="final_night.css">
    <script src="final_night.js"></script>
</head>
<body>
    <h1>
        <a href="qwer">
            WEB
        </a>
    </h1>
    <ol>
        <li>
            <a href="asdf">
                HTML
            </a>
        </li>
        <li>
            <a href="zxcv">
                CSS
            </a>
        </li>
        <li>
            <a href="uiop">
                JavaScript
            </a>
        </li>
    </ol>
    <h2>
        Nightmode
    </h2>
    <p>
        Night mode making again...
    </p>

    <input type="button" value="NIGHT" onclick="
    if (this.value === 'NIGHT') {
    bodyBackgroundColor('black')
    bodyColor('powderblue')
    linkColor('powderblue')
    this.value='DAY'
    }
    else {
    bodyBackgroundColor('white')
    bodyColor('navy')
    linkColor('navy')
    this.value ='NIGHT'
    }
    ">
</body>
</html>

But I found that function linkColor is not working and details of error is that "linkColor is not a function".

I tried to check linkColor function with chrome console, and checked that just writing linkColor('red') or ('blue') is working well.

So I think error occurs when fuction linkColor is in if conditional statement in html document, but still I can't figure out what's wrong.

Does anyone know how to fix this?

CodePudding user response：

It is not recommended to inline JS. You should use addEventListener to add listener on HTML element.

But you can also get the button reference using querySelector and addEventListener to it

function bodyBackgroundColor(color) {
  var target = document.querySelector('body')
  target.style.backgroundColor = color
}

function bodyColor(color) {
  var target = document.querySelector('body')
  target.style.color = color
}

function linkColor(color) {
  var link = document.querySelectorAll('a')
  var i = 0
  while (i < link.length) {
    link[i].style.color = color
    i = i   1
  }
}


const button = document.querySelector("button");
button.addEventListener("click", function() {
  if (this.value === 'NIGHT') {
    bodyBackgroundColor('black')
    bodyColor('powderblue')
    linkColor('powderblue')
    this.value = 'DAY'
  } else {
    bodyBackgroundColor('white')
    bodyColor('navy')
    linkColor('navy')
    this.value = 'NIGHT'
  }

})

<div class="wrapper">
  <h1>
    <a href="qwer">
          WEB
        </a>
  </h1>
  <ol>
    <li>
      <a href="asdf">
            HTML
          </a>
    </li>
    <li>
      <a href="zxcv">
            CSS
          </a>
    </li>
    <li>
      <a href="uiop">
            JavaScript
          </a>
    </li>
  </ol>
  <h2>
    Nightmode
  </h2>
  <p>
    Night mode making again...
  </p>

  <button type="button" value="NIGHT"> change theme</button>