визуальный ответ для функций в другом файле

Question

Я новичок в Javascript и какое-то время проблема. Первый случай:

Я создаю электронное приложение Deskotp, которое подключено к базе данных mySQL. В основном. js я подключаюсь через sequelize, который отлично работает. Теперь я хочу, чтобы целевая страница (index. html) показала svg с зеленым кружком, если соединение установлено, и красным, если электрон не подключен к базе данных. code main. js:

    var connection = mysql.createConnection({
  host: 'localhost',
  user: 'example',
  password: 'password',
  database: 'database'
});
connection.connect();
const Sequelize = require("sequelize");
const sequelize = new Sequelize('mysql://example:password:localhost/database');

sequelize

  .authenticate()
  .then(() => {
    console.log('Connection successfully made.');

  })
  .catch(() => {
    console.log('Error connecting to database');

  });

index. html:

<text class="titel"> Statusanzeige </text>

   <div class="connection" id="connection"><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1.04747,0,0,1.04747,4.75659,4.03844)">
        <text x="21.032px" y="13.026px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:16px;fill:white;"> mit Datenbank verbunden</text>
    </g>

    <g transform="matrix(1.05652,0,0,1.18757,0.119163,-1.87565)">
        <ellipse cx="12.963" cy="10" rx="8.519" ry="7.579" style="fill:rgb(78, 246, 0);"/>
    </g>
</svg>
</div> 

Что я не понимаю, как я могу переключать два разных svg в случае .then и .catch в индексе. html?

может быть, пример с объяснением был бы великолепен, у меня все еще есть проблемы с пониманием представления.

спасибо за ваше время!

Answer 1

Как говорит Роберт, просто измените цвет круга, используя CSS.

Что-то вроде следующего:

const connState = document.getElementById("connection-state");

sequelize

  .authenticate()
  .then(() => {
    console.log('Connection successfully made.');
    connState.classList.add("connected");
    connState.classList.remove("not-connected");
  })
  .catch(() => {
    console.log('Error connecting to database');
    connState.classList.add("not-connected");
    connState.classList.remove("connected");
  });

<div class="connection" id="connection">
  <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1.04747,0,0,1.04747,4.75659,4.03844)">
        <text x="21.032px" y="13.026px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:16px;fill:white;"> mit Datenbank verbunden</text>
    </g>

    <g transform="matrix(1.05652,0,0,1.18757,0.119163,-1.87565)">
      <ellipse id="connection-state" cx="12.963" cy="10" rx="8.519" ry="7.579"/>
    </g>
  </svg>

</div>

#connection-state {
  fill: grey;
}

#connection-state.connected {
  fill: rgb(78, 246, 0);
}

#connection-state.not-connected {
  fill: red;
}