Home>

I'm new to programming and I'm not sure, so I'd like to ask for help.
Made with monaca.

I want to read the characters entered in the input form and play the corresponding video. How should I write it?

I know how to create an input form, load a video, and display it,
I don't know how to read the entered value and display the corresponding video.

Here's what I want to do.
In advance, we will make 46 30-second videos to match the 46 characters of hiragana.
For example, when the viewer inputs "aiueo" on the keyboard, I want to display the videos corresponding to each of A, I, U, E, and at the same time (so that they partially overlap).
I will limit the input to only hiragana, up to 7 characters.

I couldn't find it even after searching, so please let me know if there are any articles that might be helpful.

  • Answer # 1

    Hello.

    >I want to read the characters entered in the input form and play the corresponding video

    It looks like the following.

    Make a dictionary of hiragana and video paths

    Loop the input text character by character
    ① Extract the video path corresponding to the character from the dictionary
    (2) Place the video element with the video path embedded in the src attribute

    sample

    const dict = {
    }
    const input = document.querySelector ('input');
    const submit = document.getElementById ('submit');
    submit.addEventListener (`click`, () =>
      Array.from (input.value) .forEach (chr =>{
        const target = document.createElement ('video');
        target.src = dict [chr];
        document.body.insertAdjacentElement ('beforeend', target);
        target.play ();
      })
    );

Related articles