从YT获取视频ID，然后将其插入文本区域

Question

我已经知道这个问题有答案，但它们并没有真正说明如何实现这个答案，而且由于我刚开始编程，所以我无法让它开始工作。

我的网站是一个HTML页面，它有一个文本区域，用户输入一个Youtube视频URL，然后单击一个按钮，将视频ID取出并插入到底部的文本区域。

更新

我已经把不必要的部分去掉了。名字。照片。

​

​

因此，用户在"Youtube视频URL“文本区域中输入YT URL，然后单击”单击以生成新视频URL“，将其放置在”生成的新视频URL“中，并在前面添加一个新地址。

"FAw“-输入

按钮被点击

"www.Testing.com/YYix0rw_FAw“-被输出

Answer 1

本演示程序使用以下内容：

• HTMLFormControlsCollection
• ES6 Template Literals
• .insertAdjacentHTML()

详细信息在演示中有注释

演示

​

/* HTMLFormControlsCollection
 - Requires: <form>
 - Form Controls (FC): <input>, <button>, <select>, <textarea>, <output>, and <fieldset>
 - All FC must be inside <form> 
 - Each FC needs an #id and/or name
 - Very easy way to reference FC:
 (see code below):   
*/
// Forms interface
//=================
// .forms.IDorName or .forms[IDorName]
var form = document.forms.main;

// .elements property accesses ALL FC
var ctrl = form.elements;

// Referencing elements of Form
var bttn = ctrl.bttn;

// Register click event on <button>
bttn.onclick = function(e) {

  // Get user text input
  const IN = ctrl.text.value;

  // Extract the last 11 charaters
  var ID = IN.substring(IN.length - 11);

  // Verifying
  console.log(ID);

  /* Template Literals
  It's String Literals using new and powerful syntax:
  
  1. SL: common quotes: ' "
     TL: uncommon backticks: `
  2. SL: ....'+ VAR +'....
     TL: ....${VAR}.....
  */
  var URL = `http://phoney.fak/${ID}`;

  /* .insertAdjacentHTML('LOCATION', `STRING to be rendered as HTML`)`
   */

  ctrl.view.insertAdjacentHTML('beforeend', URL + '<br>');

}

<form id='main'>
  <input id='text'>
  <input id='bttn' type='button' value='GO'>
  <output id='view'></output>
</form>



<br><br><br>
<h3>TEST</h3>
<p>Copy &amp; Paste each of these URLS into the input above</p>
<ul>
  <li>https://www.youtube.com/watch?v=o0u4M6vppCI</li>
  <li>https://youtu.be/U9t-slLl30E</li>
  <li>https://youtu.be/4r7wHMg5Yjg</li>
</ul>

​