Почему мой результат манипуляции с JS DOM не определен и не меняет HTML?

Question

Почему мой результат манипуляции с JS DOM не определен и не меняет HTML?

На сегодняшний день (апрель 2016 года) код в предыдущем решении не работает, я думаю, что можно сразу вводить окно в App.ts, а затем собирать значения, которые вам нужны, в службу глобального доступа в Приложение, но если вы предпочитаете создавать и вводить свою собственную услугу, это проще.

https://gist.github.com/WilldelaVega777/9afcbd6cc661f4107c2b74dd6090cebf

//--------------------------------------------------------------------------------------------------
// Imports Section:
//--------------------------------------------------------------------------------------------------
import {Injectable} from 'angular2/core'
import {window} from 'angular2/src/facade/browser';

//--------------------------------------------------------------------------------------------------
// Service Class:
//--------------------------------------------------------------------------------------------------
@Injectable()
export class WindowService
{
    //----------------------------------------------------------------------------------------------
    // Constructor Method Section:
    //----------------------------------------------------------------------------------------------
    constructor(){}

    //----------------------------------------------------------------------------------------------
    // Public Properties Section:
    //----------------------------------------------------------------------------------------------
    get nativeWindow() : Window
    {
        return window;
    }
}

1

dom html javascript

задан Thomas 15 January 2019 в 20:16

1 ответ

Другие вопросы по тегам:

dom html javascript

Похожие вопросы:

score 0 · Answer 1

Первая проблема: да, печать не определена, потому что вы на самом деле ничего не возвращаете. Когда вы пытаетесь войти в систему что-то, что не возвращается, это по сути будет неопределенным. В приведенном ниже фрагменте я отредактировал его так, чтобы он возвращал innerHTML, чтобы вы могли видеть результат.

Во-вторых, вы не хотите использовать innerHTML.replace, если вы заменяете контент, который вы хотели бы просто сделать innerHTML = новым контентом.

.replace пытается заменить определенное подмножество символов, а не заменить содержимое.

Наконец, вы немедленно звоните по клику из-за того, как вы его передаете. Вам нужно обернуть его в анонимную функцию, чтобы он вызывался только по щелчку.

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

const flipAllCards = function () {
    for(const card of cards) {
        card.innerHTML = `<img src="img/cardback.jpeg" alt="">`;
    }
};
const cards = document.querySelectorAll(".card");
function assignImages () {
    for(const card of cards) {
        const cardName = card.id + "WAFFLES";
        const imageName = `${cardName}.jpeg`;
        function flipCard (card) {
            card.innerHTML = (`<img src="img/${imageName}" alt="">`);
            return card.innerHTML;
        }
        console.log(flipCard(card));
        card.addEventListener('click', function(){flipCard(card)});
    }
}
assignImages();

<div class="table">
    <div class="card" id = "agentbrown"><img src="img/agentbrown.jpeg" alt=""></div>
    <div class="card" id = "agentjones"><img src="img/agentjones.jpeg" alt=""></div>
    <div class="card" id = "agentsmith"><img src="img/agentsmith.jpeg" alt=""></div>
    <div class="card" id = "spoonboy"><img src="img/spoonboy.jpeg" alt=""></div>
    <div class="card" id = "switch"><img src="img/switch.jpeg" alt=""></div>
    <div class="card" id = "trinity"><img src="img/trinity.jpeg" alt=""></div>
</div>

РЕДАКТИРОВАТЬ: Также отредактировал функцию flipAllCards, поскольку она также была неправильной. При замене innerHTML вы хотите просто использовать = not .replace. То, что вы сейчас имеете, пытается сказать: замените контент

. Вы можете увидеть лучшее представление этого ниже.

var element = document.getElementById('test');
// THIS WON'T UPDATE
element.innerHTML.replace('I love waffles!', 'juice is terrible');


// THIS WILL UPDATE

element.innerHTML = 'juice is amazing with waffles';

<div id="test">
    I love waffles!
<div>