JavaScriptが動作しません

JavaScriptが動作していないみたいで、間違っている箇所がありましたら教えてください。
以下がコードです...

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script type="text/javascript">
function WordShuffler(holder,opt){
  var that = this;
  var time = 0;
  this.now;
  this.then = Date.now();
  
  this.delta;
  this.currentTimeOffset = 0;
  
  this.word = null;
  this.currentWord = null;
  this.currentCharacter = 0;
  this.currentWordLength = 0;


  var options = {
    fps : 20,
    timeOffset : 5,
    textColor : '#000',
    fontSize : "50px",
    useCanvas : false,
    mixCapital : false,
    mixSpecialCharacters : false,
    needUpdate : true,
    colors : [
      '#f44336','#e91e63','#9c27b0',
      '#673ab7','#3f51b5','#2196f3',
      '#03a9f4','#00bcd4','#009688',
      '#4caf50','#8bc34a','#cddc39',
      '#ffeb3b','#ffc107','#ff9800',
      '#ff5722','#795548','#9e9e9e',
      '#607d8b'
    ]
  }

  if(typeof opt != "undefined"){
    for(key in opt){
      options[key] = opt[key];
    }
  }


  
  this.needUpdate = true;
  this.fps = options.fps;
  this.interval = 1000/this.fps;
  this.timeOffset = options.timeOffset;
  this.textColor = options.textColor;
  this.fontSize = options.fontSize;
  this.mixCapital = options.mixCapital;
  this.mixSpecialCharacters = options.mixSpecialCharacters;
  this.colors = options.colors;

   this.useCanvas = options.useCanvas;
  
  this.chars = [
    'A','B','C','D',
    'E','F','G','H',
    'I','J','K','L',
    'M','N','O','P',
    'Q','R','S','T',
    'U','V','W','X',
    'Y','Z'
  ];
  this.specialCharacters = [
    '!','§','$','%',
    '&','/','(',')',
    '=','?','_','<',
    '>','^','°','*',
    '#','-',':',';','~'
  ]

  if(this.mixSpecialCharacters){
    this.chars = this.chars.concat(this.specialCharacters);
  }

  this.getRandomColor = function () {
    var randNum = Math.floor( Math.random() * this.colors.length );
    return this.colors[randNum];
  }

  //if Canvas
 
  this.position = {
    x : 0,
    y : 50
  }

  //if DOM
  if(typeof holder != "undefined"){
    this.holder = holder;
  }

  if(!this.useCanvas && typeof this.holder == "undefined"){
    console.warn('Holder must be defined in DOM Mode. Use Canvas or define Holder');
  }


  this.getRandCharacter = function(characterToReplace){    
    if(characterToReplace == " "){
      return ' ';
    }
    var randNum = Math.floor(Math.random() * this.chars.length);
    var lowChoice =  -.5 + Math.random();
    var picketCharacter = this.chars[randNum];
    var choosen = picketCharacter.toLowerCase();
    if(this.mixCapital){
      choosen = lowChoice < 0 ? picketCharacter.toLowerCase() : picketCharacter;
    }
    return choosen;
    
  }

  this.writeWord = function(word){
    this.word = word;
    this.currentWord = word.split('');
    this.currentWordLength = this.currentWord.length;

  }

  this.generateSingleCharacter = function (color,character) {
    var span = document.createElement('span');
    span.style.color = color;
    span.innerHTML = character;
    return span;
  }

  this.updateCharacter = function (time) {
    
      this.now = Date.now();
      this.delta = this.now - this.then;

       

      if (this.delta > this.interval) {
        this.currentTimeOffset++;
      
        var word = [];

        if(this.currentTimeOffset === this.timeOffset && this.currentCharacter !== this.currentWordLength){
          this.currentCharacter++;
          this.currentTimeOffset = 0;
        }
        for(var k=0;k<this.currentCharacter;k++){
          word.push(this.currentWord[k]);
        }

        for(var i=0;i<this.currentWordLength - this.currentCharacter;i++){
          word.push(this.getRandCharacter(this.currentWord[this.currentCharacter+i]));
        }


        if(that.useCanvas){
          c.clearRect(0,0,stage.x * stage.dpr , stage.y * stage.dpr);
          c.font = that.fontSize + " sans-serif";
          var spacing = 0;
          word.forEach(function (w,index) {
            if(index > that.currentCharacter){
              c.fillStyle = that.getRandomColor();
            }else{
              c.fillStyle = that.textColor;
            }
            c.fillText(w, that.position.x + spacing, that.position.y);
            spacing += c.measureText(w).width;
          });
        }else{

          if(that.currentCharacter === that.currentWordLength){
            that.needUpdate = false;
          }
          this.holder.innerHTML = '';
          word.forEach(function (w,index) {
            var color = null
            if(index > that.currentCharacter){
              color = that.getRandomColor();
            }else{
              color = that.textColor;
            }
            that.holder.appendChild(that.generateSingleCharacter(color, w));
          }); 
        }
        this.then = this.now - (this.delta % this.interval);
      }
  }

  this.restart = function () {
    this.currentCharacter = 0;
    this.needUpdate = true;
  }

  function update(time) {
    time++;
    if(that.needUpdate){
      that.updateCharacter(time);
    }
    requestAnimationFrame(update);
  }

  this.writeWord(this.holder.innerHTML);


  console.log(this.currentWord);
  update(time);
}

var headline_11 = document.getElementById('headline_01');
var headline_12 = document.getElementById('headline_02');
var headline_13 = document.getElementById('headline_03');
var headline_14 = document.getElementById('headline_04');
var headline_15 = document.getElementById('headline_05');
var text = document.getElementById('text');
var shuffler = document.getElementById('shuffler');

var headText = new WordShuffler(headline_11,{
  textColor : '#fff',
  timeOffset : 18,
  mixCapital : true,
  mixSpecialCharacters : true
});
var [headText.length](headline_12,{
  textColor : '#fff',
  timeOffset : 18,
  mixCapital : true,
  mixSpecialCharacters : true
});
var [headText.length](headline_13,{
  textColor : '#fff',
  timeOffset : 18,
  mixCapital : true,
  mixSpecialCharacters : true
});
var [headText.length](headline_14,{
  textColor : '#fff',
  timeOffset : 18,
  mixCapital : true,
  mixSpecialCharacters : true
});
var [headText.length](headline_15,{
  textColor : '#fff',
  timeOffset : 18,
  mixCapital : true,
  mixSpecialCharacters : true
});


var pText = new WordShuffler(text_01,{
  textColor : '#fff',
  timeOffset : 2
});
var [pText.length] = new WordShuffler(text_02,{
  textColor : '#fff',
  timeOffset : 2
});
var [pText.length] = new WordShuffler(text_03,{
  textColor : '#fff',
  timeOffset : 2
});
var [pText.length] = new WordShuffler(text_04,{
  textColor : '#fff',
  timeOffset : 2
});
var [pText.length] = new WordShuffler(text_05,{
  textColor : '#fff',
  timeOffset : 2
});

var buttonText = new WordShuffler(shuffler,{
  textColor : 'tomato',
  timeOffset : 10
});



  shuffler.addEventListener('click',function () {
    headText.restart();
    pText.restart();
    buttonText.restart();
  });
</script>
<style type="text/css">
*{
	box-sizing:border-box;
}

html,body{
	width:100%;
	height:100%;
}

body{
	margin:0;
	overflow:hidden;
	background:#222;
	font-family: monospace;
}
h1{
	margin-top:0;
}

button{
	font-family: monospace;
	border:2px solid tomato;
	background:transparent;
	width:250px;
	font-size:1.2em;
	padding : 10px 0;
	border-radius:5px;
	display:block;
  cursor:pointer;
	margin:1em auto;
}
article{
	width:80%;
	margin:auto;
	font-size:2em;
	top:50%;
	position:relative;
	transform:translateY(-50%);
}
</script>
</head>
<body>
<article>
  <h1 id="headline_01">英語</h1>
  <p id="text_01">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
  <h1 id="headline_02">数学</h1>
  <p id="text_02">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
  <h1 id="headline_03">国語</h1>
  <p id="text_03">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
  <h1 id="headline_04">理科</h1>
  <p id="text_04">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
  <h1 id="headline_05">社会</h1>
  <p id="text_05">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
  <button id="shuffler">リセット</button>
</article>
</body>
</html>

K_3578

2021/05/10 08:43

動作しないってことはエラーも出てないって事です？

Lhankor_Mhy

2021/05/10 08:52

バグありすぎると思うんですが、この質問のゴールはどこですか。

m.ts10806

2021/05/10 09:54

想定する動作、このアプリケーションが何を実現するためのものなのか書かないとゴールに向かわないと思います。「全部見て」だとそれこそ作業依頼・デバッグ依頼です。せめてエラー確認とデバッグできるところまではやってみてください。ただ単に「動かない」だけだと「書いたとおりに動いてますね」くらいの感想にとどまることもあります。

行動規範の内容に同意します

回答2件

勘でテキトウに修正したら動いたのでどうぞ。
回答に入り切らなかったので2分割してコメントにも書いてます。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <title></title>
5    <style>
6        * {
7            box-sizing: border-box;
8        }
9
10        html,
11        body {
12            width: 100%;
13            height: 100%;
14        }
15
16        body {
17            margin: 0;
18            overflow: hidden;
19            background: #222;
20            font-family: monospace;
21        }
22
23        h1 {
24            margin-top: 0;
25        }
26
27        button {
28            font-family: monospace;
29            border: 2px solid tomato;
30            background: transparent;
31            width: 250px;
32            font-size: 1.2em;
33            padding: 10px 0;
34            border-radius: 5px;
35            display: block;
36            cursor: pointer;
37            margin: 1em auto;
38        }
39
40        article {
41            width: 80%;
42            margin: auto;
43            font-size: 2em;
44            top: 50%;
45            position: relative;
46            transform: translateY(-50%);
47        }
48    </style>
49</head>
50<body>
51    <article>
52        <h1 id="headline_01">英語</h1>
53        <p id="text_01">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
54        <h1 id="headline_02">数学</h1>
55        <p id="text_02">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
56        <h1 id="headline_03">国語</h1>
57        <p id="text_03">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
58        <h1 id="headline_04">理科</h1>
59        <p id="text_04">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
60        <h1 id="headline_05">社会</h1>
61        <p id="text_05">あいうえおかきくけこさしすせそたちつてとなにぬねのまみむめもやゆよらりるれろわをん</p>
62        <button id="shuffler">リセット</button>
63    </article>

投稿2021/05/10 10:09

編集2021/05/10 10:15

Jon_do

総合スコア1373

Jon_do

2021/05/10 10:13

行動規範の内容に同意します

ベストアンサー

間違っている箇所がありましたら教えてください。

見つけたものだけを上げます。

js
1//var [headText.length](headline_12,{
2// たぶんこう
3headText.length = new WordShuffler(headline_12,{

js
1//var [pText.length] = new WordShuffler(text_02,{
2// たぶんこう
3pText.length = new WordShuffler(text_02,{

html
1<!--</script>-->
2</style>
3</head>

その他、script要素をbody閉じタグの直前に移動。

あと、「たぶん、headTextとpTextを配列にしたいんだろうなあ」と感じられますが、全体的におかしいです。

投稿2021/05/10 09:44

Lhankor_Mhy

総合スコア36981

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

JavaScriptが動作しません

関連した質問