Переключение имен идентификаторов в javascript

Question

Работа на шахматной доске с использованием html и javascript. Я пытаюсь добавить функцию, чтобы пользователь мог перевернуть точку зрения доски и столкнулся с ошибкой, которую я понимаю, но не могу понять, как ее решить. Код ниже ....

function flipBoard(){ 

    document.getElementById("a8").id = "h1"; 
    document.getElementById("a7").id = "h2"; 
    document.getElementById("a6").id = "h3"; 
    document.getElementById("a5").id = "h4"; 
    document.getElementById("a4").id = "h5"; 
    document.getElementById("a3").id = "h6"; 
    document.getElementById("a2").id = "h7"; 
    document.getElementById("a1").id = "h8"; 

    document.getElementById("h8").id = "a1"; 
    document.getElementById("h7").id = "a2"; 
    document.getElementById("h6").id = "a3"; 
    document.getElementById("h5").id = "a4"; 
    document.getElementById("h4").id = "a5"; 
    document.getElementById("h3").id = "a6"; 
    document.getElementById("h2").id = "a7"; 
    document.getElementById("h1").id = "a8"; 
} 

Так .... я думал, что это будет работать нормально, но обнаружил, что это наносит ущерб моей борту позиции наполовину белый, наполовину черными на обеих сторонах платы , Проблема, конечно, в том, что после того, как исходный квадрат «a1» переименован в «h8», теперь есть два квадрата «h8», а в конце кода он переключается обратно на «a1».

Я понятия не имею, как заставить имена имен переключаться одновременно, в противном случае мне пришлось бы добавить много кода, переключая имена имен на третье имя в качестве владельца места, прежде чем переключать их на желаемое имя. Возможно, но утомительно, и я чувствую, что должен быть более простой способ сделать это.

Любые идеи?

Answer 1

Вы можете уменьшить повторение текущего кода, генерируя значения идентификаторов программно в цикле:

function flipBoard(){ 
    var a, h, aVal, hVal, aEl, hEl; 

    for(a = 8, h = 1; a > 0; --a, ++h) { 
     aVal = 'a' + a; 
     hVal = 'h' + h; 

     // Store off the current values 
     aEl = document.getElementById(aVal); 
     hEl = document.getElementById(hVal); 

     // swap them 
     aEl.id = hVal; 
     hEl.id = aVal; 
    } 
} 

demo fiddle

Answer 2

Сохраните ссылку на элемент в переменной. Например:

function flip(){ 
    var aEight = document.getElementById("a8"), 
     hOne = document.getElementById("h1"); 

    aEight.id = "h1"; 
    hOne.id = "a8"; 
} 

Отделяя этапы нахождения ваших элементов и изменение их идентификаторов, вы легко сможете следить за перевернутые элементы.