将输入从文本更改为无线电停止现有代码工作

Question

我有一些代码，可以从教程网站中奏效。它显示RSVP并在输入输入框时更新文本。这是有效的代码：

https://jsfiddle.net/spadez/7gyrd08w/6/

当前它与输入框一起使用：

<input id="input" type="text" value="EDIT ME">

，然后以下JS：

function initInput() {
  input = document.getElementById('input');
  input.addEventListener('keyup', updateText);
  input.value = 'RSVP';
}

我想将其更改以在选择一个人时从无线电框中提取值。所以我将HTML更改为：

<input id="input" type="radio" name="rsvp" value="Yay!">
<input id="input" type="radio" name="rsvp" value="Oh no!">

和此（第167行）的JavaScript：

function initInput() {
input = document.getElementById('input');
input.addEventListener('change', updateText);
input.value = 'RSVP';
}

但是，这不起作用，当我选择一个无线电框时，文本不会更新。有什么明显的原因吗？可以在此处看到此代码（不使用无线电字段）：

https://jsfiddle.net/spadez/7gyrd08w/7/

Answer 1

使用以下代码。这应该可以帮助您解决问题。

var height,
  width,
  container,
  scene,
  camera,
  renderer,
  particles = [],
  mouseVector = new THREE.Vector3(0, 0, 0),
  mousePos = new THREE.Vector3(0, 0, 0),
  cameraLookAt = new THREE.Vector3(0, 0, 0),
  cameraTarget = new THREE.Vector3(0, 0, 800),
  textCanvas,
  textCtx,
  textPixels = [],
  input;
var colors = ['#F7A541', '#F45D4C', '#FA2E59', '#4783c3', '#9c6cb7'];
function initStage() {
  width = window.innerWidth;
  height = window.innerHeight;
  container = document.getElementById('stage');
  window.addEventListener('resize', resize);
  container.addEventListener('mousemove', mousemove);
}
function initScene() {
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);
  container.appendChild(renderer.domElement);
}
function randomPos(vector) {
  var radius = width * 3;
  var centerX = 0;
  var centerY = 0;
  // ensure that p(r) ~ r instead of p(r) ~ constant
  var r = width + radius * Math.random();
  var angle = Math.random() * Math.PI * 2;
  // compute desired coordinates
  vector.x = centerX + r * Math.cos(angle);
  vector.y = centerY + r * Math.sin(angle);
}
function initCamera() {
  fieldOfView = 75;
  aspectRatio = width / height;
  nearPlane = 1;
  farPlane = 3000;
  camera = new THREE.PerspectiveCamera(
    fieldOfView,
    aspectRatio,
    nearPlane,
    farPlane);
  camera.position.z = 800;
  console.log(camera.position);
  console.log(cameraTarget);
}
function createLights() {
  shadowLight = new THREE.DirectionalLight(0xffffff, 2);
  shadowLight.position.set(20, 0, 10);
  shadowLight.castShadow = true;
  shadowLight.shadowDarkness = 0.01;
  scene.add(shadowLight);
  light = new THREE.DirectionalLight(0xffffff, .5);
  light.position.set(-20, 0, 20);
  scene.add(light);
  backLight = new THREE.DirectionalLight(0xffffff, 0.8);
  backLight.position.set(0, 0, -20);
  scene.add(backLight);
}
function Particle() {
  this.vx = Math.random() * 0.05;
  this.vy = Math.random() * 0.05;
}
Particle.prototype.init = function(i) {
  var particle = new THREE.Object3D();
  var geometryCore = new THREE.BoxGeometry(20, 20, 20);
  var materialCore = new THREE.MeshLambertMaterial({
    color: colors[i % colors.length],
    shading: THREE.FlatShading
  });
  var box = new THREE.Mesh(geometryCore, materialCore);
  box.geometry.__dirtyVertices = true;
  box.geometry.dynamic = true;
  particle.targetPosition = new THREE.Vector3((textPixels[i].x - (width / 2)) * 4, (textPixels[i].y) * 5, -10 * Math.random() + 20);
  particle.position.set(width * 0.5, height * 0.5, -10 * Math.random() + 20);
  randomPos(particle.position);
  for (var i = 0; i < box.geometry.vertices.length; i++) {
    box.geometry.vertices[i].x += -10 + Math.random() * 20;
    box.geometry.vertices[i].y += -10 + Math.random() * 20;
    box.geometry.vertices[i].z += -10 + Math.random() * 20;
  }
  particle.add(box);
  this.particle = particle;
}
Particle.prototype.updateRotation = function() {
  this.particle.rotation.x += this.vx;
  this.particle.rotation.y += this.vy;
}
Particle.prototype.updatePosition = function() {
  this.particle.position.lerp(this.particle.targetPosition, 0.02);
}
function render() {
  renderer.render(scene, camera);
}
function updateParticles() {
  for (var i = 0, l = particles.length; i < l; i++) {
    particles[i].updateRotation();
    particles[i].updatePosition();
  }
}
function setParticles() {
  for (var i = 0; i < textPixels.length; i++) {
    if (particles[i]) {
      particles[i].particle.targetPosition.x = (textPixels[i].x - (width / 2)) * 4;
      particles[i].particle.targetPosition.y = (textPixels[i].y) * 5;
      particles[i].particle.targetPosition.z = -10 * Math.random() + 20;
    } else {
      var p = new Particle();
      p.init(i);
      scene.add(p.particle);
      particles[i] = p;
    }
  }
  for (var i = textPixels.length; i < particles.length; i++) {
    randomPos(particles[i].particle.targetPosition);
  }
}
function initCanvas() {
  textCanvas = document.getElementById('text');
  textCanvas.style.width = width + 'px';
  textCanvas.style.height = 200 + 'px';
  textCanvas.width = width;
  textCanvas.height = 200;
  textCtx = textCanvas.getContext('2d');
  textCtx.font = '700 100px Arial';
  textCtx.fillStyle = '#555';
}
//function initInput() {
// input = document.getElementById('input');
//  input.addEventListener('keyup', updateText);
// input.value = 'RSVP';
//}
function initInput() {
  radios = document.getElementsByName('rsvp');
  for (radio in radios) {
    (radios[radio]).onclick = updateText;
  }
  //input.value = 'RSVP';
}
function updateText() {
  var value = (this.value != undefined) ? this.value : '';
  var fontSize = (width / (value * 1.3));
  if (fontSize > 120) fontSize = 120;
  textCtx.font = '700 ' + fontSize + 'px Arial';
  textCtx.clearRect(0, 0, width, 200);
  textCtx.textAlign = 'center';
  textCtx.textBaseline = "middle";
  textCtx.fillText(value.toUpperCase(), width / 2, 50);
  var pix = textCtx.getImageData(0, 0, width, 200).data;
  textPixels = [];
  for (var i = pix.length; i >= 0; i -= 4) {
    if (pix[i] != 0) {
      var x = (i / 4) % width;
      var y = Math.floor(Math.floor(i / width) / 4);
      if ((x && x % 6 == 0) && (y && y % 6 == 0)) textPixels.push({
        x: x,
        y: 200 - y + -120
      });
    }
  }
  setParticles();
}
function animate() {
  requestAnimationFrame(animate);
  updateParticles();
  camera.position.lerp(cameraTarget, 0.2);
  camera.lookAt(cameraLookAt);
  render();
}
function resize() {
  width = window.innerWidth;
  height = window.innerHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
  textCanvas.style.width = width + 'px';
  textCanvas.style.height = 200 + 'px';
  textCanvas.width = width;
  textCanvas.height = 200;
  updateText();
}
function mousemove(e) {
  //var x = e.pageX - width/2;
  //var y = e.pageY - height/2;
  //cameraTarget.x = x*-1;
  //cameraTarget.y = y;
}
initStage();
initScene();
initCanvas();
initCamera();
createLights();
initInput();
animate();
setTimeout(function() {
  updateText();
}, 40);

body {
  overflow: hidden;
}
div,
canvas {
  position: absolute;
}
#text {
  z-index: 200;
  display: none;
}
form {
  z-index: 400;
  position: absolute;
  text-transform: uppercase;
  font-size: 30px;
  color: #222;
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
<div id="stage"></div>
<canvas id="text" width="700" height="150"></canvas>
<form>
  <!--<input id="input" type="text" value="EDIT ME">-->
  <input id="input" type="radio" name="rsvp" value="Yay!">
  <input id="input" type="radio" name="rsvp" value="Oh no!">
</form>